Angular 不编译 SASS/SCSS 文件答案

【问题标题】：Angular not compiling SASS/SCSS filesAngular 不编译 SASS/SCSS 文件
【发布时间】：2018-02-07 06:01:11
【问题描述】：

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 文件？

【问题讨论】：

尝试将文件扩展名从.css更改为.scss
我认为提供的路径是错误的
你在使用 webpack 吗？
我所有的 SCSS 文件都带有 .scss 扩展名。我正在使用当前的 Angular CLI，所以文件夹结构是它自己的。我在 angular cli 提供的 src 文件夹中编写代码。因为，我使用的是 Angular CLI，所以它必须是 webpack。
所有js文件都需要import './../styles/appStyles.scss';吗？

标签： angular sass

【解决方案1】：

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

即：

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

对于单独编译 scss，请检查此链接 https://scotch.io/tutorials/using-sass-with-the-angular-cli

【讨论】：

好的，我把css文件放在这里styleUrls: ['./app.component.scss'],让我看看你的建议。谢谢
我不知道这是否解决了提问者的问题，但它肯定为我解决了这个问题。谢谢！
我的已链接，但未编译。

【解决方案2】：

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

@import "variables"

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

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

但是，如果您想应用您的样式，您仍然必须显式导入您的 scss 文件。

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

【讨论】：