web-dev-qa-db-fra.com

Utilisation du préfixe automatique avec postcss dans le webpack 2.x

Comment utiliser autoprefixer avec webpack 2.x.

Auparavant, c'était quelque chose comme ça ...

...

module: {
  loaders: [
     {
       test: /\.scss$/,
        loader: 'style!css!sass!postcss'
     }
   ]
},
postcss: () => {
  return [autoprefixer]
},

...

Mais ça ne marche plus.

Comment le réécrire à [email protected]?

22
Pranesh Ravi

Webpack 2.x.x est un tueur et un disjoncteur de build

webpack 2.x.x A introduit le plugin webpack.LoaderOptionsPlugin() où vous devez définir tous les plugins d'option du chargeur. Comme, autoprefixer est un plugin pour postcss-loader. Donc, ça doit aller ici.

Et

  • module.rules Remplace module.loaders
  • Tous les chargeurs devraient avoir explicitement déclaré qu'ils sont un chargeur. Ex. loader: 'style!css' Devrait être loader: 'style-loader!css-loader'

La nouvelle configuration ressemblera à ceci ...

...

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

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

...

J'espère que cela aide tout le monde.

25
Pranesh Ravi

Il n'est plus nécessaire d'utiliser 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...*/
            ]
        }]}         
    }
    /*...*/
};

Si vous devez fournir une configuration de compatibilité spécifique, vous pouvez la passer comme argument à la fonction autoprefixer:

options: {
    plugins: function () {
        return [autoprefixer('last 2 versions', 'ie 10')]
    }
}
26
kreig

Depuis le 20 juillet 2017, pour configurer l'Autoprefixer avec Webpack v2.4.1, j'ai fait ce qui suit:

Installez les chargeurs nécessaires:

yarn add -D postcss-loader autoprefixer style-loader sass-loader css-loader

créez un fichier postcss.config.js dans le répertoire racine de votre projet:

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

Dans votre niveau racine package.json spécifiez les navigateurs que vous souhaitez prendre en charge:

"browserslist": ["defaults", "not ie < 11"]

Dans votre webpack.config.js des dossiers module.rules spécifiez vos chargeurs avec le postcss-loader suivant le css-loader (J'utilise également scss):

  {
    test: /\.scss$/,
    use: [
      {
        loader: 'style-loader' // Adds CSS to the DOM by injecting a <style> tag
      },
      {
        loader: 'css-loader' //  interprets @import and url() like import/require() and will resolve them.
      },
      {
        loader: 'postcss-loader', // postcss loader so we can use autoprefixer
        options: {
          config: {
            path: 'postcss.config.js'
          }
        }
      },
      {
        loader: 'sass-loader' // compiles Sass to CSS
      }
    ],
  },
18
clhenrick

Courant webpack.config.js pour utiliser autoprefixer et postcss avec webpack2.1.0-beta.27

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer')

module.exports = {
  entry: './index.js',
  devtool: 'inline-source-map',
  output: { filename: 'bundle.js', publicPath: '' },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          { loader: 'postcss-loader' },
        ]
      },
      {
        test: /\.js$/,
        use: [ { loader: 'babel-loader', options: { presets: ['es2015', 'react', 'stage-2'] } } ],
        exclude: /node_modules/,
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'Example', template: './index.html' }),
    new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } })
  ],
}

Remarque: Le LoaderOptionsPlugin est un 'polyfill' requis dans le webpack =< 2.1.0-beta.24. Je mettrai à jour cette réponse lorsque j'élaborerai la nouvelle syntaxe.

Exécution:

Disposez des packages pertinents suivants dans package.json:

"dependencies": {
  "autoprefixer": "^6.5.4",
  "babel-core": "^6.7.6",
  "babel-loader": "^6.2.4",
  "babel-preset-es2015": "^6.6.0",
  "babel-preset-react": "^6.5.0",
  "babel-preset-stage-2": "^6.5.0",
  "babel-register": "^6.7.2",
  "babel-runtime": "^6.6.1",
  "css-loader": "^0.26.1",
  "postcss-loader": "^1.2.1",
  "style-loader": "^0.13.1",
  "webpack": "2.1.0-beta.27",
  "webpack-dev-server": "2.1.0-beta.12"
}

Et le script pertinent suivant dans package.json:

"scripts": {
  "dev": "NODE_ENV=dev webpack-dev-server --port 3000 --inline --hot"
},

Et lancez-le avec

yarn install
npm run dev
3
svnm