单页应用程序中不同页面的 CSS 覆盖答案

【问题标题】：CSS overriding for different pages in Single page application单页应用程序中不同页面的 CSS 覆盖
【发布时间】：2016-12-09 05:19:57
【问题描述】：

我正在使用angular.js 构建SPA，两个页面，登录和仪表板具有不同的背景，但是由于它是登录后的单页面应用程序，因此背景颜色不会更改为dashboard.less 文件中提到的新颜色。在这种情况下，我使用!important，即使在注销后也会反映仪表板背景。

我希望特定页面 css 仅在 ui-routing 上加载。

请提出修复建议。我在 webpack 中使用较少。我知道这些问题也会出现在后面的页面中。我怎样才能避免这个问题。

【问题讨论】：

标签： css angularjs less webpack single-page-application

【解决方案1】：

我认为我们在这里有一个解决方案 https://github.com/manuelmazzuola/angular-ui-router-styles

添加此框架并像使用它

 .state('state1', {
    url: '/state1',
    controller: 'State1controller',
    template: '<div ui-view></div>',
    data: {
      css: [
        'styles/custom-state1.css',
        {
          name: 'layout',
          href: 'styles/state1-layout.css'
        }
      ]
    }
  })

【讨论】：

已经尝试过了，唯一的问题是我们在 webpack 中使用较少，并且无法访问在浏览器中运行时正在处理的 .css 文件。有什么帮助吗？
：你能告诉我如何获取这个由 webpack 编译的 css 文件的选项吗？所以我可以将它们单独传递给不同的路由器

【解决方案2】：

你可以做这样的事情。

<link data-ng-if="page.css" rel="stylesheet" type="text/css" data-ng-href="css/app/page/{{page.css}}/page.css" />

当您执行 ui-routing 并加载控制器时。

你会有

$scope.page = {css: "loginpage"};

【讨论】：