Compile styles using SCSS with webpack.

[thepiratedev]

Global styles should be usable in the entire app and components must have their own SCSS file.

Use this as a guide to compile root scss and child scss files.
Webpack: sass-loader

Install as a devDependency in npm.
npm install sass-loader node-sass webpack --save-dev

Guide

Chain the sass-loader with the css-loader and the style-loader to immediately apply all styles to the DOM.
// webpack.config.js module.exports = { ... module: { rules: [{ test: /\.scss$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader" // compiles Sass to CSS }] }] } };

[thepiratedev]

Dependency for Webpack

• to-string-loader
• sass-loader
• node-sass

Setup can now read and compile sass files.

NOTE
Use toString() when importing styles in components
styleUrls: ['./app.component.scss'.toString()]