Question

Angular CLI未编译SCSS文件，即使我执行ng build或npm run build也是如此。

在.angular-cli.json文件中，我提供了实现SCSS，AFAIK所需的以下代码段。

  ...
  "styles": ["styles.css", "../node_modules/normalize.css/normalize.css"],
  "stylePreprocessorOptions": {
    "includePaths": ["app"]
  },
  ...
  ...

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

我的所有scss文件都位于不同的组件文件夹中，但在app文件夹中，如\src\app\shared\style。因此，includePaths。

我的文件夹结构是这样的：

MyAngularProject
    |__src
        |__app
            |__styles
                |__app.scss
            |__component1
                |__styles
                    |__component2_Style.scss
            |__component2
                |__styles
                    |__component2_Style.scss

每次调用ng serve或ng build时，如何编译我的SCSS文件？

Answer 1

如果您的scss文件在组件装饰器中链接，那么它会自动将链接的scss编译为css。

i.e - @Component({ selector: 'app-component', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], })

并为个人编译scss检查此链接 https://scotch.io/tutorials/using-sass-with-the-angular-cli

Answer 2

stylePreprocessorOptions / includePath 配置允许您导入scss文件，如

@import "variables"

前提是此文件位于 includePath 中包含的位置，而不必明确指定文件相对路径

@import "../../styles/variables.scss";

但是，如果您希望应用样式，则仍需显式导入scss文件。

根据文件包含的内容，您可以在.angular-cli.json中，在样式设置中包含一次（如果它包含应用的全局样式），或者您必须如果要包含的文件包含变量

，请将其包含在所有scss文件中

Angular不编译SASS / SCSS文件

2 个答案: