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

Question

Trying to import a variables.scss file and keep getting a build failed error:

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)

In src/styles I have

/* 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';

In src/styles-variables.scss I have

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

$accent-color: #006a55;

@import '~styles-variables.scss' issues a build error whereas @import 'styles-variables.scss' does not.

Also, when I import the style-variables.scss in a style in another module, I have to use relative paths @import "../../../styles-variables.scss"; in order for it to build. Its my understanding that the tilde should resolve it without having to include the paths.

It seems like the ~ is having problems resolving the path, but it does resolve for bootstrap and font-awesome. Any ideas on what I am doing wrong?

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

It seems there's an issue with Angular versions 6 and above with the tilde- see here

Instead, I'd recommend adding the following line to the build options for this project in your angular.json file:

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

And then you should be able to just write:

@import "styles-variables"

at the top of all files using those variables with no problems.

Answer 2

If you reach here with google search, make sure your file name is matching exactly ie case sensitive.

For me, it was building fine in my local but it was failing in pipeline.

Answer 3

1. scss: your folder name which is store your all scss files.
2. vars: your scss file name

you just write at the top :

@import '../scss/vars';