webentwicklung-frage-antwort-db.com.de

Sass Loader und Webpack 4

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.

5
Jonhy Beebop

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 .

6
Huy Nguyen

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.

10
Hamed

Die Beta funktioniert gut mit [email protected]

npm install [email protected]

0
Tomek