I have a file that I need to use in another css file.
For that I have added this to angular.json file:
"styles": ["src/assets/css/theme.scss"],
Then I try to use it in a css file:
@import "theme.scss";
Angular can not find this path.
2 Answers
If you want to point to a css/scss file within a component, you can add a shortcut to your styles folder in your angular.json in the options node like so :
"my-app": {
"root": "...",
"sourceRoot": "...src",
"projectType": "application",
"architect": {
"build": {
[...]
"options": {
[...]
"stylePreprocessorOptions": {
"includePaths": [
"projects/my-app/src/styles" // path to your styles folder
]
}
}
},
}
},
Then, whenever you use @import "...";, it will start from the css folder, so you can use @import "theme.scss";
3 Comments
Reactgular
+1 this is a good answer, but it doesn't point out that the source code for
theme.scss will be moved to the /dist folder during the build, and people can then download the source code from the web server. The source code is never used, because SASS has imported it into the JavaScript bundle. So use the above option, but move your code away from your assets folder. That folder is for static files.
POV
I get error, that not allowed
stylePreprocessorOptions
KevinTale
@OPV, it should be added at the same level as "options". I'll fix my answer
go to angular.json and include "styles": ["../assets/css/theme.scss","styles.css"],
theme.scssis in the same folder as the css file, then you can use@Import './theme.scss';otherwise (if for example is one level above):@import '../theme.scss';