Include global sass with Angular 4 and webpack

Question

I have a project built on Angular 4 with webpack with HMR. Not sure if this matters but I am using the ASP Core 2 with angular template.

What I am trying to do is have a global/main scss file that is applied across all components. I wanted to have this scss file compile with webpack so it is delivered with the other styles in the node_modules folder.

I have tried to implement this with no luck. My main scss file is named styles.global.scss and I tried to include it with the following rule in my webpack.config.js file

{ 
    test: /\.global\.scss$/, 
    exclude: /node_modules/, 
    use: ['style-loader', 'css-loader', 'sass-loader'] 
}

I don't get any errors when I run the application and run the webpack command, however, I do not see my styles being applied. All the resources in my node_modules folder are being applied so at least that works. I would like to keep view encapsulation on my angular components. I would prefer to not have to import the main/global scss file into each components scss file as well as having to include it in each of the stylesUrl field in the component.ts files.

Please let me know if you need to see any additional code. Thanks in advance!

EDIT: Wanted to include this in the question in case anyone finds themselves in a similar situation. I had another rule for .scss files that was directly conflicting with the rule stated above.

{ 
   test: /\.scss$/, 
   exclude: /node_modules/, 
   use: [ 'raw-loader', 'sass-loader' ] 
},

Kirk Larkin Kirk Larkin · Accepted Answer · 2017-09-14T07:15:09

It sounds like you need to just instruct Webpack to process your file. You could do that with an import at the top of boot.browser.ts (assuming you're using the standard setup):

import './path/to/styles.global.scss';

UPDATE: Based on further discussion in the comments and corresponding chat, we discovered that the two .scss rules were conflicting with each other. Based on this, updating the rule shown in the original question fixes the issue:

{
    test: /\.scss$/,
    exclude: [/node_modules/, /\.global\.scss$/],
    use: [ 'raw-loader', 'sass-loader' ]
}

This ensures that *.global.scss files are processed only once.

Include global sass with Angular 4 and webpack

1 Answers