web-dev-qa-db-fra.com

Webpack 4, plug-in postcss-loader et autoprefixer

Je suis assez frustré d'essayer de faire fonctionner l'autoprefixer. 

Voici mon webpack.config.js 

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

const config = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: "css-loader", options: {} },
                    { loader: "postcss-loader", options: {} },
                    // {
                    //  loader: "postcss-loader",
                    //  options: {
                    //      ident: "postcss",
                    //      plugins: (loader) => [
                    //          require('autoprefixer')({ browsers: ['defaults']})
                    //      ]
                    //  }
                    // },
                    { loader: "sass-loader", options: {} }
                ]
            },
            {
                test: /\.mp3$/,
                use: {
                    loader: "file-loader"
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "main.css"
        })
    ]
};

module.exports = config;

Voici mon postcss.config.js 

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

Actuellement, mon package.json contient les options de ma liste de navigation.

Comme vous pouvez le constater, j'ai essayé d'utiliser le fichier webpack pour conserver mes paramètres de configuration pour postcss-loader et j'ai également essayé de créer un fichier de configuration séparé. 

J'ai essayé de déplacer la liste des navigateurs, mais je ne pense pas que ce soit le problème, car j'exécute npx browserslist et je peux voir une liste des navigateurs sélectionnés.

Ma déclaration postcss-loader dans la configuration de mon webpack vient après css-loader et avant sass-loader

De plus, je ne reçois pas d'erreur dans ma console lorsque j'exécute webpack, donc je ne suis pas sûr de ce qui se passe, mais je pourrais vraiment avoir besoin d'aide!

javascriptwebpack
2
doublea

Ne fonctionne pas mais { browsers: ['defaults']}

Essayer:

     {
        test: /\.css$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader?modules&importLoaders=1&localIdentName=[local]_[hash:base64:6]',
            {
                loader: 'postcss-loader',
                options: {
                    plugins: () => [require('autoprefixer')({
                        'browsers': ['> 1%', 'last 2 versions']
                    })],
                }
            },
        ]
    }

ou

// postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')({
            'browsers': ['> 1%', 'last 2 versions']
        })
    ]
};
10
tkm9

En gros, il vous manque le paquet Autoprefixer de votre environnement. Pour résoudre le problème, vous avez le choix entre deux solutions:

Solution 1

npm install --save-dev postcss-loader autoprefixer

Maintenant, dans votre fichier postcss.config.js, vous pouvez ajouter quelque chose comme ceci:

module.exports = {
  plugins: [
    require('autoprefixer')({
      'browsers': ['> 1%', 'last 2 versions']
    })
  ]
};

Solution 2 (recommandé)

Celui-ci provient de de la documentation de PostCSS Loader , et puisque vous utilisez ce paquet, c'est peut-être la méthode recommandée.

postcss-preset-env inclut autoprefixer; l'ajouter séparément est donc pas nécessaire si vous utilisez déjà le préréglage.

Comme vous pouvez le voir pour obtenir Autoprefixer, il vous suffit d'installer PostCSS Preset Env .

npm install --save-dev postcss-loader postcss-preset-env

Maintenant, débarrassez-vous de votre fichier postcss.config.js et déplacez cette configuration dans votre webpack.config.js pour qu’elle ressemble à ceci:

...
rules: [
  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      { loader: "css-loader", options: {} },
      {
        loader: "postcss-loader",
        options: {
          ident: 'postcss',
          plugins: [
            require('autoprefixer')({
              'browsers': ['> 1%', 'last 2 versions']
            }),
          ]
        }
      },
      { loader: "sass-loader", options: {} }
    ]
  }
]
...

J'espère que cela aide, il m'a également fallu beaucoup de temps pour le comprendre aussi;)

4
altrugon

Essayez de modifier comme ça

webpack.config.js:

{
            test: /\.scss$/,
            use: [
                "style-loader", "css-loader", 'postcss-loader', 'resolve-url-loader', 'sass-loader?sourceMap'
            ]
        },

postcss.config.js:

require('autoprefixer')({browsers: ['last 10 versions']}),
1
胡亚雄

Comme mentionné ci-dessus, vous devez spécifier la liste de navigateurs. Mais au lieu d’ajouter ceci à votre webpack.config et au postcss-config, vous pouvez ajouter le code suivant simplement au package.json après les dépendances. Travaillé pour moi.

"browserslist": [
  "> 1%",
  "last 2 versions"
],
0
dlemm