web-dev-qa-db-fra.com

Chargeur Sass et Webpack 4

Comment utiliser sass loader avec webpack 4? J'ai beaucoup lu à ce sujet et la plupart des sites ont recommandé d'utiliser ExtractTextPlugin, mais ExtractTextPlugin ne fonctionne pas avec webpack 4.

J'ai écrit à la suite 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,
        })
    ]
};

Le fichier de sortie .js fonctionne bien, mais mon fichier .scss n'a pas été compilé en css. J'ai essayé d'ajouter des points d'entrée:

entry: {
    stylesheet: path.resolve('src', 'scss/styles.scss'),
    main: path.resolve('src', 'index.js')
}

et après cela, mon styles.scss est compilé en stylesheet.js, mais pas en .css.

javascriptwebpacksass-loader
5
Jonhy Beebop

webpack 4 n'est pas encore capable de générer un fichier autonome *.css par lui-même. Pour obtenir un fichier *.css séparé, vous devez utiliser le extract-text-webpack-plugin pour extraire tous les CSS dans leur propre bloc d’entrée. Ceci est un bon tutoriel .

6
Huy Nguyen

Vous pouvez utiliser mini-css-extract-plugin.

https://github.com/webpack-contrib/mini-css-extract-plugin

J'ai utilisé le même plugin pour extraire SASS vers CSS à l'aide de Webpack 4 et cela fonctionne à merveille.

10
Hamed

La beta fonctionne bien avec [email protected]

npm install extract-text-webpack-plugin@next

0
Tomek