Webpack for Beginners #6 - SASS Loaders

>> Tutorial Webpack for Beginners

1. What is SASS Loaders

- Transfer SASS file to CSS file

2. Step by step using

* Install SASS Loaders

npm install node-sass sass-loader --save-dev

* create file src/css/introComponent.scss

$mainColour: #7777bb;

.intro-component{

padding: 20px;

background: $mainColour;

color: #fff;

font-family: arial;

h1{

text-transform: uppercase;

}

}

* Configure webpack.config.js

module.exports = {

//define entry point

entry: './src/script-1.js',

//define output point

output: {

path: 'dist',

filename: 'bundle.js'

},

module: {

loaders: [

{

test: /\.js$/,

exclude: /(node_modules)/,

loader: 'babel-loader',

query: {

presets: ['es2015']

}

},

{

test: /\.scss$/,

loader: 'style-loader!css-loader!sass-loader'

}

] //loaders

} //module

};

- test: /\.scss$/, //just wanted run on .scss file

- loader: 'style-loader!css-loader!sass-loader', // which loader we use is style-loader , css-loader and sass-loader

* Running webpack

webpack

>> Soure change on Github 

>> Tutorial Webpack for Beginners

Thank you