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'
						}
					]
				}
			]
		}
	}
};

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': {}
	}
}

Das hier sind die Dev-Abhängigkeiten meines Projekts aus der package.json (einige davon sind nicht für den Webpack-Task notwendig):

"devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.0",
  "css-flip": "^0.5.0",
  "css-loader": "^0.28.7",
  "csso-cli": "^1.0.0",
  "extract-loader": "^1.0.1",
  "extract-text-webpack-plugin": "^3.0.0",
  "file-loader": "^0.11.2",
  "node-sass": "^4.5.3",
  "postcss-cli": "^4.1.0",
  "postcss-loader": "^2.0.6",
  "sass-loader": "^6.0.6",
  "webpack": "^3.5.6"
},

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

Das könnte auch interessant sein

2 Kommentare zu »SASS mit Webpack in eigene CSS-Datei kompilieren«

  1. Sören Wrede

    Danke für deinen Blogbeitrag.
    Ich hatte vor einigen Monaten auch danach gesucht und bin auf Laravel Mix gestoßen. Das ist ein Wrapper für webpack, der die Syntax vereinfacht. Es werde viele wichtige Funktionen wie concatenation, minification u.v.m. bereits mitgeliefert. Außerdem kann die gleich Syntax auch für JS verwenden.

    https://github.com/JeffreyWay/laravel-mix

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.