Include global sass with Angular 4 and webpack -

i have project built on angular 4 webpack hmr. not sure if matters using asp core 2 angular template.

what trying have global/main scss file applied across components. wanted have scss file compile webpack delivered other styles in node_modules folder.

i have tried implement no luck. main scss file named styles.global.scss , tried include following rule in webpack.config.js file

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

i don't errors when run application , run webpack command, however, not see styles being applied. resources in node_modules folder being applied @ least works. keep view encapsulation on angular components. prefer not have import main/global scss file each components scss file having include in each of stylesurl field in component.ts files.

please let me know if need see additional code. in advance!

edit: wanted include in question in case finds in similar situation. had rule .scss files directly conflicting rule stated above.

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

it sounds need instruct webpack process file. import @ top of boot.browser.ts (assuming you're using standard setup):

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

update: based on further discussion in comments , corresponding chat, discovered 2 .scss rules conflicting each other. based on this, updating rule shown in original question fixes issue:

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

this ensures *.global.scss files processed once.