Angular CLI SCSS File to Import not found or unreadable

user_257975 0
Viewed 10066

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
angular sass
3 Answers

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.

user_105865990

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

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

user_22362630
  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';
user_112670580
Related