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";来进行构建。我的理解是，代字号可以解决它，而不必包含路径。

似乎~在解析路径时遇到问题，但是确实可以解决引导程序和超棒的字体。关于我在做什么错的任何想法吗？

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

Answer 1

角度6以及更高版本的Angular似乎存在问题，请参见here

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

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

然后您应该可以编写：

@import "styles-variables"

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

Answer 2

如果您使用Google搜索到达此处，请确保您的文件名完全匹配，即区分大小写。

对我来说，它在我的本地环境中运行良好，但是在管道中却失败了。

Answer 3

scss：您存储所有scss文件的文件夹名称。
vars：您的scss文件名

您只需在顶部写下：

mouse:move': (evt) => {
   var canvasOffset = $('#eraserCanvas').offset();
   var x = evt.e.pageX - canvasOffset.left;
   var y = evt.e.pageY - canvasOffset.top;
   var pixel = ctx.getImageData(x, y, 1, 1);
}

找不到或无法读取的要导入的Angular CLI SCSS文件

3 个答案: