web-dev-qa-db-fra.com

css autoprefixer avec webpack

J'ai essayé de configurer le webpack avec LESS et Autoprefixer, mais l'autoprefixer ne semble pas fonctionner. Mes fichiers CSS ou moins ne sont pas autofixés. Exemple: display: flex reste display: flex

J'ai mis ma configuration webpack ci-dessous:

var autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    bundle: "./index.jsx"
  },
  output: {
    path: __dirname,
    filename: "[name].js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['react-hot', 'babel-loader']
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader")
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
      }

    ],
    postcss: function () {
      return [autoprefixer];
    }
  },
  plugins: [
    new webpack.BannerPlugin(banner),
    new ExtractTextPlugin("style.css")
  ],
  devtool: 'source-map',
  devServer: {
    stats: 'warnings-only',
  }
};
webpackautoprefixerpostcss
16
wrick17

J'ai donc trouvé le problème. Silly me, le bloc postcss doit être directement sous la configuration du webpack, je l'avais mis dans le bloc modules. Ma faute.

EDIT: voici comment cela aurait dû être:

var autoprefixer = require('autoprefixer');

module.exports = {
    ...
    postcss: function () {
        return [autoprefixer];
    }
    ...
};

Donc, au lieu de le mettre à l'intérieur du bloc de modules, j'ai dû le placer directement sous le bloc principal comme indiqué ci-dessus.

8
wrick17

Comme écrit en documentation Autoprefixer , "Autoprefixer uses Browserslist"

Selon la documentation Browserslist , il est recommandé de placer la Browserslist dans package.json.

Voici donc une autre façon d'utiliser le préfixeur automatique avec webpack :

installez postcss-loader et autoprefixer:

npm i -D postcss-loader autoprefixer

webpack.config.js

module: {
  rules: [
    {
      test: /\.scss$/,
      exclude: /node_modules/, 
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
    },
    { 
      test: /\.css$/, 
      use: ['style-loader', 'css-loader', 'postcss-loader'] 
    },
    ...
  ]
}

Selon documentation postcss , le postcss-loader doit être placé après css-loader et style-loader, mais avant d'autres chargeurs de préprocesseur comme par exemple sass|less|stylus-loader, si vous en utilisez.

package.json

"postcss": {
  "plugins": {
    "autoprefixer": {}
  }
},
"browserslist": [
  "last 2 version",
  "not dead",
  "iOS >= 9"
]

De cette façon, vous n'avez pas besoin d'un postcss.config.js fichier.

10
antoni

Vous devrez configurer postcss dans votre configuration de webpack pour les anciennes versions de navigateur.

La valeur par défaut pour le préfixe automatique est les 2 dernières versions de navigateurs ou les navigateurs qui ont au moins 5% de part de marché.

https://github.com/postcss/autoprefixer#browsers

  postcss: [
    autoprefixer({
      browsers: ['last 3 versions', '> 1%']
    })
  ],

Il indique que vous prenez en charge les 3 dernières versions de navigateurs ou des navigateurs qui détiennent au moins 1% de part de marché.

3
Marcel Mandatory

J'avais un problème similaire avec Webpack 2.x.x et les propriétés personnalisées ne sont plus autorisées dans la configuration. J'ai trouvé une solution sur cet autre post S.O: tilisation du préfixe automatique avec postcss dans webpack 2. . Dans le cas où, pour une raison inconnue, ce lien conduirait à un 404, je compile les réponses les plus pertinentes ici:

Webpack 2.xx introduit webpack.LoaderOptionsPlugin () plugin là où vous en avez besoin pour définir tous les plugins d'options du chargeur. Comme, autoprefixer est un plugin pour postcss-loader. Donc, ça doit aller ici. La nouvelle configuration devrait ressembler à ceci:

module: {
  rules: [
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader', 
      'postcss-loader']
    }
  ]
},

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        autoprefixer(),
      ]
    }
  })
],

Cela a fonctionné pour moi, mais comme mentionné par Kreig, il n'y a pas besoin de LoaderOptionsPlugin (). Vous pouvez maintenant passer des options directement à la déclaration du chargeur:

const autoprefixer = require('autoprefixer');

let settings = {
/*...*/
  module: {
    rules: [{
      test: /\.css$/,
        use: [
          /*...other loaders...*/
          {
            loader: 'postcss-loader',
              options: {
                plugins: function () {
                  return [autoprefixer]
                }
              }
          }
          /*...other loaders...*/
       ]
    }]
  }         
}
/*...*/

La chose est que j'ai essayé le 2ème avec Webpack 2.5.1 mais il a échoué. Les crédits vont à Pranesh Ravi et Kreig.

1
theFreedomBanana