web-dev-qa-db-fra.com

Webpack 4. Compiler scss en fichier css séparé

Im essayant de compiler scss dans un fichier css séparé sans chance. Comme c'est maintenant le css entre dans le bundle.js avec tout le code js. Comment puis-je séparer mon CSS dans son propre fichier?

Voici à quoi ressemble ma config.

var path = require("path");

module.exports = {
entry: "./js/main.js",
output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/dist"
},
watch:true,
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: "babel-loader",
                options: { presets: ["es2015"] }
            }
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader"
                },
                {
                    loader: "sass-loader"
                }
            ]
        }
    ]
}

};

webpackwebpack-4
8
fortyfiveknots

Vous devez utiliser le MiniCssExtractPlugin . Cela extraira votre CSS dans un fichier séparé.

Vous devrez ajouter ou modifier quelques parties de votre fichier webpack.config.js.

Vous devrez exiger le plugin en haut du fichier:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

Une propriété plugins est également requise dans l'objet modules:

plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].css",
    chunkFilename: "[id].css"
  })
]

Et vous devrez modifier votre règle scss. Notez que le test est légèrement différent pour inclure les fichiers .scss (probablement pour nommer les fichiers scss .scss) et l'ajout du sass-loader que vous devrez installer avec npm. Les chargeurs dans le tableau `` use '' fonctionnent dans l'ordre inverse, donc sass-charger va d'abord, convertissant scss en css, puis le chargeur css puis extrait le plugin extrait à nouveau le css dans un fichier séparé:

{
    test: /\.s?css$/,
    use: [
      MiniCssExtractPlugin.loader,
      "css-loader",
      "sass-loader"
    ]
}

Je pense donc que votre fichier de configuration changera comme ceci:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");

module.exports = {
    entry: "./js/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "/dist"
    },
    watch:true,
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: { presets: ["es2015"] }
                }
            },
            {
                test: /\.s?css$/,
                use: [
                  MiniCssExtractPlugin.loader,
                  "css-loader",
                  "sass-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
          filename: "[name].css",
          chunkFilename: "[id].css"
        })
    ]
}

J'espère que cela pourra aider.

5
Bryan