Compile SASS with Webpack into a CSS file

Posted on

It is not trivial to compile an SCSS file with Webpack, which is not included in the JS file, into its own CSS file. This post shows you how to do that.

Update from September 6, 2018: I updated the post to show a solution with Webpack 4.

Update from October 28, 2022: The css-loader syntax changed, as Nick pointed out in his comment.

I needed this because I had to use Webpack for a project and did not want to use another tool for compiling the SASS. At the end of my search, the solution was to use the extract-loader.

This is my webpack.config.json:

const path = require('path');

module.exports = {
	mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
	entry: ['./blocks/index.js', './blocks/editor.scss', './blocks/frontend.scss'],
	output: {
		path: path.resolve(__dirname, 'assets'),
		filename: 'js/editor.blocks.js',
	},
	module: {
		rules: [
			{
				test: /\.scss$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							name: 'css/[name].blocks.css',
						}
					},
					{
						loader: 'extract-loader'
					},
					{
						loader: 'css-loader?-url'
					},
					{
						loader: 'postcss-loader'
					},
					{
						loader: 'sass-loader'
					}
				]
			}
		]
	}
};
Code language: JavaScript (javascript)

With that, Webpack compiles the ./blocks/editor.scss to the editor.blocks.css inside the assets/css directory and the ./blocks/frontend.scss to the assets/css/frontend.blocks.css. The postcss-loader runs Autoprefixer. To get that working, I created a postcss.config.js with the following content:

module.exports = {
	plugins: {
		'autoprefixer': {}
	}
}
Code language: JavaScript (javascript)

These are the dev dependencies from my package.json (a few are not necessary for the Webpack task) and the NPM tasks to run Webpack:

"scripts": {
  "build:dev": "webpack",
  "build:production": "cross-env NODE_ENV=production webpack",
  "watch": "webpack --watch"
},
"devDependencies": {
  "@babel/core": "^7.0.0",
  "@wordpress/babel-preset-default": "^2.1.0",
  "@babel/runtime-corejs2": "^7.0.0",
  "autoprefixer": "^9.1.3",
  "babel-loader": "^8.0.0",
  "cross-env": "^5.2.0",
  "css-loader": "^1.0.0",
  "extract-loader": "^2.0.1",
  "file-loader": "^2.0.0",
  "node-sass": "^4.9.3",
  "postcss-cli": "^6.0.0",
  "postcss-loader": "^3.0.0",
  "sass-loader": "^7.1.0",
  "webpack": "^4.17.2",
  "webpack-cli": "^3.1.0"
},
Code language: JavaScript (javascript)

Now, if I run the webpack command, I get my SASS compiled into CSS.

19 reactions on »Compile SASS with Webpack into a CSS file«

  2. Hello Florian. Thanks for this tuto, but it is not woeking for me. I am using Webpack 4. I did all your changes, but when i execute 'npm webpack' i recieve an error:

    "ERROR in .[...filepath...]
    Module build failed (from ./node_modules/postcss-loader/lib/index.js):
    TypeError: Cannot read property 'type' of undefined"

    Do you know what can be wrong here? Thanks!

    Reply

  6. Thank you so much for this tutorial. It has helped me out a lot!!

    I have two questions:
    1. Googled this and couldn't find an answer, why do you enter the css-loader, like this ''css-loader?-url"?
    2. Any insights into how to generate sourcemaps?
    I spent the whole day trying different alternatives but keep getting different errors and getting nowhere.

    Thank you so much!!

    Reply

    1. Hi Mauricio,

      thanks for the comment, glad the post is helpful! 🙂

      To your first question: That is to prevent inlining of things that are loaded via url() in the CSS: https://github.com/webpack-contrib/css-loader/issues/44

      To your second question: not really, sorry. I did not work on really setting up a webpack config for some time now, I am using the NPM package @wordpress/scripts now that comes with a webpack config, that creates source maps for JS code.

      Best,
      Florian

      Reply

  8. wow after 3 different methods, this actually worked! Thanks for this. Also saved my day. Do you maybe have also a solution for solving import that need globbing?
    So for example @import "variables/**/*";

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *