在 angular-cli 项目中使用 mdc sass 文件答案

【问题标题】：use mdc sass files in angular-cli projects在 angular-cli 项目中使用 mdc sass 文件
【发布时间】：2018-04-03 21:26:46
【问题描述】：

我有一个使用angular-cli 的项目。我正在使用mdc components/。我想导入单个组件的 sass 文件。为此，

1) 我已使用此命令更改了默认 styleExt

ng set defaults.styleExt scss

2) 将文件style.css 重命名为style.scss。

3) 在angular-cli.json 中更改了

"styles": [
        "styles.css"
      ],

到

"styles": [
        "styles.scss"
      ],

4) 添加stylePreprocessorOptions 配置以包含路径

"stylePreprocessorOptions": {
        "includePaths": [
          "node_modules"
        ]
 }

5) 最后在style.scss文件中导入

@import '~@material/button/mdc-button';

但这是显示

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precis
ion":8,"includePaths":["D://SK//Study//Material//MaterialWithAngularDemo//src//node_modules"]}!./src/styles.scss
Module build failed:
undefined
^
      File to import not found or unreadable: @material/theme/mixins.
Parent style sheet: D:/SK/Study/Material/MaterialWithAngularDemo/node_modules/@material/button/mdc-button.scss
      in D:\SK\Study\Material\MaterialWithAngularDemo\node_modules\@material\button\mdc-button.scss (line 17, column 1)
 @ ./src/styles.scss 4:14-187
 @ multi ./src/styles.scss

我错过了什么吗？

【问题讨论】：

标签： css sass angular-cli sass-loader mdc-components

【解决方案1】：

includePath 中有一个错误，而不是 node_modules，它应该是 ../node_modules。

"stylePreprocessorOptions": {
        "includePaths": [
          "../node_modules"
        ]
 }

更改后，它工作正常。

【讨论】：