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]?
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
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.
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')]
}
}
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
}
],
},
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