Question

我正在使用Angular CLI with Webpack创建一个全新的Angular 2项目。我似乎无法弄清楚如何创建一个包含mixins，变量和特定标签的导入的全局SCSS文件。

每当我尝试在任何SCSS文件中定位<body>时，当我检查元素时，这些样式都无处可寻。我尝试创建一个app.css文件并将其包含在index.html文件的头部，但后来我遇到了无法导入我的mixins或变量或任何类型的问题。

是否有人能够创建某种类型的app.scss文件，所有子组件都从中继承全局样式，并且能够定位<body>？

Answer 1

在应用全局样式时，Webpack的最新版本angular-cli似乎出现了错误。请参阅此Github issue。

更新：2016年8月31日 升级到最新版本（1.0.0-beta.11-webpack.8）似乎解决了angular-cli全局样式的问题。要设置全局样式，请按照here的说明操作。默认情况下使用全局CSS文件，如果您希望使用全局SCSS样式表，则可以在创建应用程序时指定--style=scss标志：

ng new scss-project --style=scss

angular-cli将生成全局样式表styles.scss并将其包含在angular-cli.json文件中。这向angular-cli表明styles.scss中声明的样式应该是全局的并应用于整个应用程序（而不是作用于特定组件）。这相当于通过index.html中的链接语句包含样式表。

对于现有项目，您可以使用以下方式设置默认样式：

ng set defaults.styleExt scss

在angular-cli.json中，可以将额外的全局样式表或脚本添加到下面显示的样式和脚本数组中：

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ]

为什么样式没有应用于您的身体标签？

我猜这里是因为您没有发布任何代码，但是您的SCSS样式未应用于<body>代码的原因是因为您使用的是Component Styles。使用angular-cli标志生成--style=scss项目时，会创建名为app.compontent.ts的根级别组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

它还会生成一个名为app.component.scss的{{3}}。这一点非常重要，因为组件样式的范围是它们的组件。组件样式在组件中设置如下：

styleUrls: ['app.component.scss']

app.component.scss中包含的任何样式只会应用于app.component.ts及其相应的模板app.component.html（以及其子代）。样式未应用于<body>标记的原因是因为它位于index.html生成的angular-cli文件中根级别组件范围之外：

  <body>
    <app-root>Loading...</app-root>
  </body>

我希望能回答你的问题。

Answer 2

您必须从组件文件中导入变量所在的文件：

@import "XX/XX/XX/_name.scss";

XX是使用变量

的文件的相对路径

Answer 3

游戏可能有点晚了。对我们来说，我们有自定义的webpack配置，并利用sass-resources-loader将全局mixins /变量暴露给组件。

{ test: /\.scss$/, loader: ["raw-loader", "sass-loader", { loader: 'sass-resources-loader', options: { resources: ['./styles/global/_common.scss', './styles/global/_mixins.scss', './styles/global/_grid.scss', 'node_modules/bootstrap/scss/_mixins.scss', 'node_modules/bootstrap/scss/_variables.scss'] }, } ] }

使用Webpack的Angular CLI - 如何在项目中包含全局SCSS？

3 个答案: