This tutorial is an element 3 of 4 in ‘Webpack with Fashion’-series.
For those who occur to have a customized Webpack setup, it’s possible you’ll be questioning find out how to arrange SASS with Webpack. This brief tutorial walks you thru the method. Initially, you want to set up a SASS loader and a SASS to your dev dependencies:
npm set up --save-dev sass-loader node-sass
And second, you need to use the SASS loader for all CSS and SCSS recordsdata in your Webpack configuration:
...
module.exports = {
...
module: {
guidelines: [
...
css)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
,
],
},
...
};
Then in a brand new src/fashion.scss file, add some CSS with SASS particular options (e.g. nested selectors) to it:
h1 {
shade: crimson;
&:hover {
shade: blue;
}
}
And in your src/index.js file, or every other JS file, import this new CSS file:
import './fashion.scss';
That is it. From right here you need to use SASS in your JavaScript mission which is powered by Webpack.
This tutorial is an element 3 of 4 in ‘Webpack with Fashion’-series.
