Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular CLI SCSS File to Import not found or unreadable

Tags:

sass

angular

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
like image 643
Joe Young Avatar asked Oct 15 '25 20:10

Joe Young


2 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.

like image 100
Amethystx87 Avatar answered Oct 18 '25 13:10

Amethystx87


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.

like image 39
Raj Avatar answered Oct 18 '25 13:10

Raj



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!