How to Have Both CSS and SCSS in Angular

Is it possible to have both css and scss in Angular

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.

Angular-cli from css to scss

For Angular 6 check the Official documentation

Note: For @angular/cli versions older than 6.0.0-beta.6 use ng set in place of ng config.

For existing projects

In an existing angular-cli project that was set up with the default css styles you will need to do a few things:

1. Change the default style extension to scss

Manually change in .angular-cli.json (Angular 5.x and older) or angular.json (Angular 6+) or run:

ng config defaults.styleExt=scss

if you get an error: Value cannot be found. use the command:

ng config schematics.@schematics/angular:component.styleext scss

(*source: Angular CLI SASS options)

2. Rename your existing .css files to .scss (i.e. styles.css and app/app.component.css)

3. Point the CLI to find styles.scss

Manually change the file extensions in apps[0].styles in angular.json

4. Point the components to find your new style files

Change the styleUrls in your components to match your new file names

For future projects

As @Serginho mentioned you can set the style extension when running the ng new command

ng new your-project-name --style=scss

If you want to set the default for all projects you create in the future run the following command:

ng config --global defaults.styleExt=scss

Is it possible to use .css & .scss files both for an angular 2 component?

If you don't want to use scss in your file system and only need to take what was from the codepen, Then I suggest using this nice website http://www.sassmeister.com/ Copy and paste the scss into the left side then you can copy and paste the css from the right side to your code

Also, codepen offers the option to view the compiled css code, it's in a drop down to the right of the css section

EDIT:

Just tried copying and pasting into the sassmeister website... didn't go over so well, use the built in codepen operation of compiling to css then copy and paste that into your code

Using both Sass (Scss) and Less in an Angular 7+ project

By setting the default CSS extension you just say what should be created when you run

ng g component test

Then the component will have styles file with extension you configured.

Anyway, it does not mean you cannot use both.

Just change the extension of generated file to .less and adapt the reference in the component.

styleUrls: ['./test.component.less'],

or even leave both files:

styleUrls: ['./test.component.less', './test.component.scss'],

So, you have one of your style files as less now.

In the end of the day you can have all possible CSS dialects mixed in your project.

How can i change already generated angular app with css stylesheet - to use scss

Use the following command to change angular config

ng config schematics.@schematics/angular:component.style scss

and open angular.json file

Change your

"schematics": {}

to

"schematics": {
     "@schematics/angular:component": {
           "styleext": "scss"       
      }     
 }

change from (at two places)

"styles": [
    "src/styles.css"
 ],

to

"styles": [
    "src/styles.scss"
 ],

Then change manually all you component .css to .scss and change in the .ts files as follows in config

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
})

and then create a component it will create .scss file as you expected

---

Related Topics