Angular 不编译 SASS/SCSS 文件

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

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

Answer 1

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

IE：

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

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