Is it possible to have both css and scss in Angular
I would recommend you change the styleExt
to scss and your css files to scss because scss is a superset of css.
EDIT for Angular 6+
Found on GitHub page of Angular:
stylePreprocessorOptions is still supported. You will have to manually update the newly generated angular.json
though. Its new place is inside the "options" block of the json.
An example config could look like this:
"options": {
"outputPath": "../webapp",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
{
"glob": "**/*",
"input": "src/resources",
"output": "/resources"
},
],
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
"scripts": []
}
Note the changed path.
ORIGINAL answer
Actually it just went fine out-of-the-box by having the "styleExt"
set to "css"
. A bunch of components in a specific module were using SASS. I have a sass folder with variables and mixins and this setting in angular-cli.json
was needed to have these scss files compiled / processed correctly:
"stylePreprocessorOptions": {
"includePaths": [
"sass"
]
}
The application renders fine with a mix of css and scss files. I assume this styleExt
parameter is just there for the default component style (css, scss, less
) file generation when adding components via angular-cli
commands.
You can have both but you have to set your style extension to SASS or CSS only.
Now of if you want to use CSS or SASS in your component just use Angular CLI to generate component like
For CSS
ng g component my-component --style=css
For SASS
ng g component my-component --style=sass
So set style extension to SASS and use CSS extensions also in your project