Is it possible to have both css and scss in Angular

Question

I am including a stand-alone build module which uses .scss (SASS) into an existing Angular app set up with plain CSS. Is it possible to have these both next to each other and does it need any custom configuration for example in the angular-cli.json defaults section:

"defaults": {
  "styleExt": "css? scss?"
}

Or is it only possible to use one of the two?

Answer 1

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.

Answer 2

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

Answer 3

I would recommend you change the styleExt to scss and your css files to scss because scss is a superset of css.