Angular CLI SCSS文件导入未找到或无法读取

Question

尝试导入variables.scss文件时，一直出现构建失败的错误：

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js
!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
^
      File to import not found or unreadable: ~styles-variables.scss.
      in C:\Users\JRYoung\Projects\ods\webclient\src\styles.scss (line 3, column 1)

在 src/styles 目录下，我有以下内容：

/* You can add global styles to this file, and also import other style files */

@import 'styles-variables.scss';
@import '~bootstrap/scss/bootstrap.scss';

$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

在 src/styles-variables.scss 文件中，我有以下内容：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

$accent-color: #006a55;

@import '~styles-variables.scss' 会引发构建错误，而@import 'styles-variables.scss'则不会。

另外，当我在另一个模块的样式中导入style-variables.scss时，我必须使用相对路径@import "../../../styles-variables.scss";才能进行构建。我的理解是用波浪线应该能够解析它并不需要包含路径。

似乎~无法解析路径，但是它可以为bootstrap和font-awesome解析路径。你有什么想法吗？

Angular CLI: 7.0.3
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
----------------------------------------
@angular-devkit/architect    0.10.3
@angular-devkit/core         7.0.3
@angular-devkit/schematics   7.0.3
@schematics/angular          7.0.3
@schematics/update           0.10.3
rxjs                         6.3.3
typescript                   3.1.3

- Joe Young

Answer 1

看起来 Angular 6 及以上版本存在波浪符的问题，请参见这里

相反，我建议在您的 angular.json 文件中为此项目添加以下行以构建选项：

"stylePreprocessorOptions": {
  "includePaths": [
    "./src/styles-variables.scss"
  ]
}

然后你应该能够轻松地编写以下内容：

@import "styles-variables"

在使用这些变量的所有文件的顶部，没有任何问题。

- Amethystx87

---

我认为 includePaths 应该只包含文件夹，所以应该是 "includePaths": ["./src"] 而不是 "includePaths": ["./src/styles-variables.scss"]。是这样吗？ - Random

Answer 2

如果您通过谷歌搜索到这里，请确保您的文件名完全匹配，即区分大小写。

对于我来说，在本地构建正常，但在管道中失败了。

- Raj

Answer 3

1. scss：你的文件夹名称，用于存放所有的 scss 文件。
2. vars：你的 scss 文件名

你只需在顶部写入：

@import '../scss/vars';

- Pratibha Singh