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
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With