2
votes

Webpack return ValidationError: Options invalides du chargeur CSS

J'obtiens une erreur pour l'option invalide du chargeur css et mon code webpack.conifg.js est le suivant:

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./public/index.html"
});

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve('dist'),
        filename: 'bundled.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName:"[name]_[local]_[hash:base64]",
                            sourceMap: true,
                            minimize: true
                        }
                    }
                ]
            },
            { 
                test: /\.(png|jpg|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000' 
            }
        ]
    },
plugins: [htmlWebpackPlugin]
};

Je ne sais pas où je me trompe. aidez-moi à résoudre ce problème. J'utilise webpack pour reactjs 4 et la version webpack est 4. Merci

reactjs webpack webpack-dev-server

2 commentaires

Pourquoi avez-vous besoin à la fois de css et de style loader? Avez-vous essayé de supprimer css loader et de simplement lyve style one?

J'ai échoué l'analyse du module: caractère inattendu '@' après la suppression du chargeur de style

4 Réponses :

3
votes

Essayez de commenter:

// minimize: true

0 commentaires

0
votes

Les commentaires de minimiser fonctionnaient auparavant, même si j'ai commencé un nouveau projet avec une nouvelle installation de css-loader , et le coupable cette fois-ci est importLoader: 1 . Supprimez simplement importLoader et cela devrait fonctionner.

J'utilise des modules css avec React, et tout fonctionne correctement.

0 commentaires

4
votes

Voici ce qui a résolu mon cas:

css-loader 2.1.1

{ loader: 'style-loader'},
{
  loader: 'css-loader',
  options: {
    modules: {
      mode: 'local',
      localIdentName: '[local]',
    },
    import: true,
    importLoaders: true,
  }
},
{ loader: 'sass-loader'}

css-loader 3.0.0

{ loader: 'style-loader'},
{
  loader: 'css-loader',
  options: {
    modules: true,
    localIdentName: '[local]',
    import: true,
    importLoaders: true,
  }
},
{ loader: 'sass-loader'}

1 commentaires

Cela a fonctionné pour moi aussi. Il y a un changement de syntaxe et je suis surpris qu'il ne soit mentionné nulle part.

0
votes

Cela a fonctionné pour mon projet VUE Js:

Naviguez jusqu'au fichier /build/utils.js et dans l'objet du commentaire css-loader sur l'option qui vous marque dans l'erreur. Dans mon cas, j'ai dû commenter:

minimiser: process.env.NODE_ENV === 'production',

0 commentaires