SASS mit Webpack in eigene CSS-Datei kompilieren

Es ist nicht ganz trivial, via Webpack eine SCSS-Datei, die nicht in die JavaScript-Datei eingebunden wird, in eine eigene CSS-Datei zu kompilieren. Hier zeige ich, wie das geht.

Anstoß dieser Bemühung war es, dass ich für ein Projekt ohnehin Webpack genutzt habe und nicht wollte, dass die SASS-zu-CSS-Kompilierung dann mit einem anderen Tool erledigt werden muss. Am Ende meiner Recherche stand die Lösung über den extract-loader.

Die relevanten Teile meiner webpack.config.json sehen so aus:

module.exports = (env = {}) => {
	return {
		entry: ['./assets/js/src/functions.js', './assets/css/scss/fanoe.scss'],
		output: {
			filename: 'assets/js/bundle.js',
		},
		module: {
			rules: [
				{
					test: /.scss$/,
					use: [
						{
							loader: 'file-loader',
							options: {
								name: '[name].css',
								outputPath: 'assets/css/'
							}
						},
						{
							loader: 'extract-loader'
						},
						{
							loader: 'css-loader'
						},
						{
							loader: 'postcss-loader'
						},
						{
							loader: 'sass-loader'
						}
					]
				}
			]
		}
	}
};
Code-Sprache: JavaScript (javascript)

Dadurch wird die ./assets/css/scss/fanoe.scss in CSS kompiliert und als fanoe.css im assets/css-Verzeichnis ausgegeben. Der postcss-loader sorgt dafür, dass der Autoprefixer ausgeführt wird. Dafür habe ich eine postcss.config.js mit folgendem Inhalt angelegt:

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

Das hier sind die Dev-Abhängigkeiten meines Projekts aus der package.json (einige davon sind nicht für den Webpack-Task notwendig) sowie die NPM-Skripte, um Webpack laufen zu lassen:

"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-Sprache: JSON / JSON mit Kommentaren (json)

Damit kann ich nun über den webpack-Befehl mein SASS in CSS kompilieren.