Wie verwende ich Sass Loader mit Webpack 4? Ich habe viel darüber gelesen und die meisten Websites haben ExtractTextPlugin empfohlen, aber ExtractTextPlugin funktioniert nicht mit Webpack 4.
Ich schrieb folgendes webpack.config.js :
const path = require('path');
const ClosureCompilerPlugin = require('webpack-closure-compiler');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}
]
},
plugins: [
new ClosureCompilerPlugin({
compiler: {
language_in: 'ECMASCRIPT6',
language_out: 'ECMASCRIPT3',
compilation_level: 'ADVANCED'
},
concurrency: 3,
})
]
};
Die .js-Datei funktioniert gut, aber meine .scss-Datei wurde nicht nach css kompiliert. Ich habe versucht, Einstiegspunkte hinzuzufügen:
entry: {
stylesheet: path.resolve('src', 'scss/styles.scss'),
main: path.resolve('src', 'index.js')
}
und danach kompiliert sich meine styles.scss zu stylesheet.js, aber nicht zu .css.
webpack
4 kann noch keine eigenständige *.css
-Datei ausgeben. Um eine separate *.css
-Datei zu erhalten, müssen Sie mit extract-text-webpack-plugin
das gesamte CSS in einen eigenen Eintragsblock ziehen. Dies ist ein gutes Tutorial .
Sie können Mini-css-extract-plugin verwenden.
https://github.com/webpack-contrib/mini-css-extract-plugin
Ich habe dasselbe Plugin zum Extrahieren von SASS in CSS mithilfe von Webpack 4 verwendet, und es funktioniert wie ein Zauber.
Die Beta funktioniert gut mit [email protected]
npm install [email protected]