
How to setup SASS or LESS with Webpack 2
July 13, 2017
Prerequisites
- Basic understanding of SASS or LESS and Webpack
LESS time, more SASS
That’s what you want in your development workflow. Spend less time configuring and setting up and more time showing off your bad-ass styled applications. Here’s a straight-forward explanation to configuring a preprocessor like SASS or LESS with Webpack.
I haven’t tested it yet but the new version of Webpack (3) should still work with this setup
Install your dependencies
You’ll of course need Webpack and NPM or Yarn (I’ll be using Yarn in this tutorial), so
yarn add webpack
Install these:
yarn add style-loader css-loader extract-text-webpack-plugin
If you’re using SASS install:
yarn add sass-loader node-sass
// node-sass is a peer dependency of SASS
If you’re using LESS install:
yarn add less-loader
A quick overview of these packages:
- ‘*-loader’ packages are responsible for compiling, injecting css scripts to the DOM, and resolving imports
- ‘extract-text-webpack-plugin’ extracts multiple SASS or LESS files and builds them into a single file
Configure Webpack
Create a ‘webpack.config.js’ in the root of your project directory if you don’t already have one. Add the following lines:
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: [
'./path/to/entry/sass/or/less' // Footnote 1
],
output: {
path: path.resolve(__dirname, 'path/to/build') // Footnote 2
},
module: {
rules: [
{
test: /\.sass$/, // Footnote 3
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'] // Footnote 4
})
}
]
},
plugins: [new ExtractTextPlugin({ filename: 'index.css' })] // Footnote 5
}
Configuration footnotes
- Specify the path to the main entry point of the SASS or LESS file. This is where Webpack will look to start.
- Adjust the ‘path’ key to the directory you want Webpack to put the final css
- Adjust the ‘test’ key according to the preprocessor you’re using, ‘sass’, ‘scss’, or ‘less’
- Adjust the loader within the ‘use’ key to the preprocessor you’re using, ‘sass-loader’ or ‘less-loader’. Note that ‘css-loader’ must be defined first in the array because Webpack evaluates loaders from right to left
- Adjust the ‘filename’ key to to the filename you want
That’s it!
Make sure to reference the compiled css file in your ‘index.html’ file and you’re good to go. With just a few lines of configuration you’re Webpack is ready to compile your SASS or LESS. Now take the time you’ve saved to get a jump on styling your application!
If you have any questions feel free to comment below or send me a tweet.