web-dev-qa-db-fra.com

Le préfixe automatique Postcss-loader ne fonctionne pas avec Webpack 3

J'essaie d'utiliser une série de chargeurs pour extraire tous les fichiers SCSS dans un seul fichier avec ExtractTextPlugin. Dans la série de chargeurs que j'ai, j'utilise le plugin autoprefixer qui est utilisé dans postcss-loader. Cependant, rien ne semble avoir de préfixe!

Ma configuration webpack est la suivante:

webpack.config.js 

const path = require('path');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
  context: __dirname,
  entry: {
    app: [
      path.resolve(entrypath),
    ],
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'sass-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [autoprefixer()]
              }
            }
          ]
        }),
      },
    ],
  },
  output: {
    path: path.join(__dirname, '../app/assets/javascripts/generated/'),
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'compiled-draft-document-scss.css',
      allChunks: true
    }),
  ],
};

module.exports = config;

Ma sortie semble tout bon, à l'exception du fait qu'aucun des préfixes n'est ajouté. Vous trouverez ci-dessous les versions pertinentes des packages que j'utilise:

"extract-text-webpack-plugin": "3.0.1",
"webpack": "^3.1.0",
"style-loader": "^0.19.0",
"css-loader": "^0.23.1",
"moment": "^2.11.1",
"postcss-loader": "^0.10.1",
"sass-loader": "^6.0.6",
webpackwebpack-style-loaderautoprefixerpostcss-loader
6
Xenyal

De postcss-loaderREADME :

Utilisez-le aprèscss-loader et style-loader, mais avant d'autres chargeurs de préprocesseur comme par exemple. sass|less|stylus-loader.

Donc, votre chaîne de chargement devrait être:

[
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      plugins: () => [autoprefixer()]
    }
  },
  'sass-loader'    
]
14
KyTrol

Dans votre fichier package.json, ajoutez

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