8

I am new to Angular 4 and to the Angular-CLI. I cannot find any solution how to use root scss/css files for the whole application. Thereby, my question, how to use global scss files in the project?

Kim Kern
  • 54,283
  • 17
  • 197
  • 195
Philipp Januskovecz
  • 868
  • 5
  • 14
  • 25

4 Answers4

16

Create a styles folder in the src folder, then you can import everything there into styles.scss which is also in the src folder. This is how mine looks:

// Vendors
@import './styles/vendors/_exports';

// Utils
@import './styles/utils/_exports';

// Globals
@import './styles/globals/_exports';

// Partials
@import './styles/partials/_exports';

// Components
@import './styles/components/_exports';

Every _exports file is importing all the files in the particular folder to make it easier to import it into the styles.scss file.

I hope this helps.

EDIT:

As pointed out in the comments, make sure that styles.scss is added to styles in the angular-cli.jsonfile or it will not work.

Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
  • 1
    Thank You :-) @Chrillewoodz – Philipp Januskovecz Mar 29 '17 at 12:06
  • @EdgarQuintero Don't downvote just because you're doing it wrong. Have you added the styles.scss file to `styles` array of the angular cli json file? And made sure your project uses SCSS instead of CSS? – Chrillewoodz Jul 22 '18 at 05:49
  • Sry, I had to modify the .angular-cli.json to include the folder src/styles/ folder, and it began to work correctly. "styles": ["styles.scss", "styles/variables.scss"], – Edgar Quintero Jul 22 '18 at 16:45
  • @EdgarQuintero Glad to hear it works now. Mind removing the downvote? – Chrillewoodz Jul 23 '18 at 07:46
  • Sure, I would suggest updating your answer with that detail though. :) – Edgar Quintero Jul 23 '18 at 17:05
  • Well that file is added by default when creating a new CLI project, and any global styles have to be added to the `styles` array which should also be known. That's why I thought it was obvious. But I will add it. – Chrillewoodz Jul 23 '18 at 17:07
  • styles.scss is added automatically, what isn't added are the new ones you are creating inside the /styles/ folders <---- – Edgar Quintero Jul 24 '18 at 01:54
  • @EdgarQuintero Those do not have to be added since you're importing them into `styles.scss`. – Chrillewoodz Jul 24 '18 at 04:44
  • Great answer! Am I right if I have new style, then I should import it into main ‘.scss’ file? If yes, please, see my question https://stackoverflow.com/questions/53211121/imported-styles-are-not-applied-to-components/53211291?noredirect=1#comment93311168_53211291 – StepUp Nov 08 '18 at 16:44
9

You will need to add the following code to you angular-cli.json (angular.json on A6+)

"stylePreprocessorOptions": {
    "includePaths": [
      "../src/assets/scss/base"
    ]
  },

Where base is the folder containing the file/s you want to @import.

Then you can just

// BEFORE
@import '../../100TIMES/variables';
// NOW
@import 'variables'; // src/assets/scss/base/_variables.scss

Thanks.

Note: YOU NEED TO REBUILD THE PROJECT TO RELOAD angular-cli.json (angular.json on A6+)

T04435
  • 12,507
  • 5
  • 54
  • 54
2

There is also the option to add your css/scss file to the "styles" array in the .angular-cli.json file. There may be a "best practice" that gets broken by doing this - I'm not really sure of the rules. But if you include a file in that array, it will be injected as though it were loaded at the top of index.html.

Here is an example from one of my projects: (/.angular-cli.json) ... "styles": [ "styles.scss", "../node_modules/font-awesome/scss/font-awesome.scss", "../node_modules/mdi/scss/materialdesignicons.scss" ], ...

IndyWill
  • 2,915
  • 1
  • 9
  • 5
  • Note that I had `style.css` in my `src` folder (not `.scss`) and if I included SCSS files inside that `style.css` file it would not error out but would not compile as SCSS. Once I updated `/.angular-cli.json` to use `style.scss` it compiled them correctly. – Nick M Jun 20 '18 at 05:17
0

Simplest way is to load scss file in the very root component , in this way all the children components will get the styles.

And if there are many files , we can import those scss files into the one scss file by using @import "scss-file";

And if children component doesn't want to use that style , then we can also handle that via encapsulation property of component

Another way is to :

stackoverflow.com/a/42865933/1876949

Community
  • 1
  • 1
Vivek Doshi
  • 56,649
  • 12
  • 110
  • 122