Je suis assez frustré d'essayer de faire fonctionner le préfixeur automatique.

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 mes options de liste de navigateurs

Comme vous pouvez le voir, 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 distinct.

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

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

Je ne reçois également aucune erreur dans ma console lorsque j'exécute webpack, donc je ne sais pas ce qui se passe, mais je pourrais vraiment utiliser de l'aide!

9
doublea 11 avril 2018 à 22:10

4 réponses

Meilleure réponse

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']
        })
    ]
};
19
ynceonrudi 12 avril 2018 à 07:08

La grande image ici est que vous manquez réellement le Autoprefixer package sur votre environnement, donc pour résoudre le problème, vous ont 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ée)

Celui-ci provient de la documentation PostCSS Loader, et puisque vous utilisez ce package, c'est peut-être le chemin recommandé.

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

Comme vous pouvez le voir pour obtenir le préfixe automatique, 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 la faire ressembler à quelque chose comme 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, cela m'a aussi pris beaucoup de temps pour le comprendre aussi;)

14
altrugon 20 déc. 2018 à 18:06

Essayez de modifier comme ceci

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']}),
2
胡亚雄 12 avril 2018 à 09:21

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

"browserslist": [
  "> 1%",
  "last 2 versions"
],
5
Capricorn 18 juin 2018 à 08:28