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

Question

I'm creating a brand new Angular 2 project, utilizing the Angular CLI with Webpack . 我正在创建一个全新的Angular 2项目，利用Angular CLI和Webpack 。 I can't quite seem to figure out how to create a global SCSS file that houses imports for mixins, variables, and specific tags. 我似乎无法弄清楚如何创建一个包含mixins，变量和特定标签的导入的全局SCSS文件。

Any time I try to target the <body> in any of SCSS files, those styles are nowhere to be found, when I inspect the element. 每当我尝试在任何SCSS文件中定位<body>时，当我检查元素时，这些样式都无处可寻。 I tried creating an app.css file and including that in the head of the index.html file, but then I run into the issues of not being able to import my mixins or variables, or anything of that sort. 我尝试创建一个app.css文件并将其包含在index.html文件的头部，但后来我遇到了无法导入我的mixins或变量或任何类型的问题。

Has anyone been able to create an app.scss file of some sort that all sub-components inherit global styles from, as well as have the ability to target the <body> ? 有没有人能够创建某种类型的app.scss文件，所有子组件都从中继承全局样式，并且能够定位<body> ？

Answer 1

There seems to be an error in the latest release of angular-cli with Webpack when it comes to applying global styles. 在应用全局样式时，Webpack的最新版本的angular-cli似乎出现了错误。 Please refer to this Github issue . 请参阅这个Github问题。

Update: 31 August 2016 Upgrading to the latest version ( 1.0.0-beta.11-webpack.8 ) seems to have fixed the issue with angular-cli global styles. 更新：2016年8月31日升级到最新版本（ 1.0.0-beta.11-webpack.8 ）似乎解决了angular-cli全局样式的问题。 To set up global styles, follow the instructions here . 要设置全局样式，请按照此处的说明进行操作。 The default is to use a global CSS file, if you wish to use a global SCSS stylesheet, you can specify the --style=scss flag when creating your app: 默认情况下使用全局CSS文件，如果您希望使用全局SCSS样式表，则可以在创建应用程序时指定--style=scss标志：

ng new scss-project --style=scss

angular-cli will generate a global style sheet styles.scss and include it in the angular-cli.json file. angular-cli将生成一个全局样式表styles.scss并将其包含在angular-cli.json文件中。 This indicates to angular-cli that styles declared in styles.scss should be global and applied to the entire application (and not scoped to a specific component). 这向angular-cli指示styles.scss声明的styles.scss应该是全局的并应用于整个应用程序（而不是作用于特定组件）。 This is the equivalent of including a style sheet via a link statement in your index.html . 这相当于通过index.html的link语句包含样式表。

For existing projects, you can set the default style using: 对于现有项目，您可以使用以下方法设置默认样式：

ng set defaults.styleExt scss

In your angular-cli.json , extra global styles sheets or scripts can be added to the styles and scripts arrays shown below: 在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"
      }
    }
  ]

Why are styles not being applied to your body tag? 为什么样式没有应用到您的身体标签？

I'm guessing here because you haven't posted any code, but the reason your SCSS styles are not being applied to the <body> tag is because you are using Component Styles . 我在这里猜测是因为你没有发布任何代码，但你的SCSS样式没有应用于<body>标签的原因是因为你使用的是Component Styles 。 When generating an angular-cli project with the --style=scss flag, it creates a root level component called app.compontent.ts : 使用--style=scss标志生成angular-cli项目时，它会创建一个名为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!';
}

It also generates a Component Style called app.component.scss . 它还会生成一个名为app.component.scss的组件样式。 This is an important point, because component styles are scoped to their component. 这一点非常重要，因为组件样式的范围是它们的组件。 A component style is set in the component like this: 组件样式在组件中设置如下：

styleUrls: ['app.component.scss']

Any styles you include in app.component.scss will only be applied to the app.component.ts and its corresponding template app.component.html (as well as its children). 您在app.component.scss包含的任何样式将仅应用于app.component.ts及其相应的模板app.component.html （及其子项）。 The reason the styles aren't applied to the <body> tag is because it lies outside of the root level component's scope in the index.html file generated by angular-cli : 样式未应用于<body>标记的原因是因为它位于angular-cli生成的index.html文件中的根级别组件范围之外：

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

I hope that answers your question. 我希望能回答你的问题。

Answer 2

You must import the file where the variable is from the component file: 您必须从组件文件中导入变量所在的文件：

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

XX are the relative route to your file with variables XX是带有变量的文件的相对路径

Answer 3

Maybe a bit late to the game. 也许游戏有点晚了。 For us we have our custom webpack config and leverages the sass-resources-loader to expose the global mixins/variables to components. 对我们来说，我们有自定义的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 个解决方案

解决方案1
3 2016-08-29 10:38:40

解决方案2
0 2017-02-07 17:25:35

解决方案3
0 2017-08-17 03:30:09

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

问题描述

3 个解决方案

解决方案1 3 2016-08-29 10:38:40

解决方案2 0 2017-02-07 17:25:35

解决方案3 0 2017-08-17 03:30:09

解决方案1
3 2016-08-29 10:38:40

解决方案2
0 2017-02-07 17:25:35

解决方案3
0 2017-08-17 03:30:09