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

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

Answer 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