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?

Yes you can have both. The defaults property in .angular-cli.json is just to tell angular-cli which one to use whenever you create new components. Just set the value to the one you use the more often I guess — David
– David, Commented Feb 27, 2018 at 14:15

Youp Bernoulli · Accepted Answer · 2019-08-05 07:16:57Z

8

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.

edited Aug 5, 2019 at 7:16

answered Feb 28, 2018 at 8:29

Youp Bernoulli

5,7027 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anto S Over a year ago

I can't find any configuration as stylePreprocessorOptions or angular-cli.json in angular8 application. Could you please suggest where to make this change?

Suhel · Accepted Answer · 2018-02-27 14:27:19Z

6

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

answered Feb 27, 2018 at 14:27

Suhel

9679 silver badges19 bronze badges

1 Comment

Mike Tung Over a year ago

How is your answer different from mine? Aside from showing how to make files it's essentially the same thing

Mike Tung · Accepted Answer · 2018-02-27 14:23:45Z

3

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

answered Feb 27, 2018 at 14:23

Mike Tung

4,8411 gold badge19 silver badges25 bronze badges

1 Comment

Youp Bernoulli Over a year ago

That wasn't even needed...as you can read from my answer below. Thanks anyway.

Collectives™ on Stack Overflow

Is it possible to have both css and scss in Angular

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related