如何在webpack 2.x中使用autoprefixer
。
以前,它是这样的...
...
module: {
loaders: [
{
test: /\.scss$/,
loader: 'style!css!sass!postcss'
}
]
},
postcss: () => {
return [autoprefixer]
},
...
但是,它不再起作用了。
如何重写以适应webpack@2.x.x?
如何在webpack 2.x中使用autoprefixer
。
以前,它是这样的...
...
module: {
loaders: [
{
test: /\.scss$/,
loader: 'style!css!sass!postcss'
}
]
},
postcss: () => {
return [autoprefixer]
},
...
但是,它不再起作用了。
如何重写以适应webpack@2.x.x?
webpack 2.x.x
引入了 webpack.LoaderOptionsPlugin()
插件,你需要在这里定义所有的 loader 选项插件。比如,autoprefixer
是一个用于 postcss-loader
的插件。所以,它必须放在这里。
并且
module.rules
替换了 module.loaders
loader: 'style!css'
应该写成 loader: 'style-loader!css-loader'
新的配置看起来应该像这样...
...
module: {
rules: [
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer(),
]
}
})
],
...
希望这能对每个人有所帮助。
LoaderOptionsPlugin
,现在可以直接将选项传递给加载器声明。const autoprefixer = require('autoprefixer');
let settings = {
/*...*/
module: {
rules: [{
test: /\.css$/,
use: [
/*...other loaders...*/
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [autoprefixer]
}
}
}
/*...other loaders...*/
]
}]}
}
/*...*/
};
如果您需要提供特定的兼容性配置,可以将其作为参数传递给 autoprefixer
函数:
options: {
plugins: function () {
return [autoprefixer('last 2 versions', 'ie 10')]
}
}
截至2017年7月20日,要在Webpack v2.4.1中设置Autoprefixer,我执行了以下操作:
安装必要的加载器:
yarn add -D postcss-loader autoprefixer style-loader sass-loader css-loader
在您的项目根目录中创建一个 postcss.config.js 文件:
module.exports = {
plugins: [
require('autoprefixer')
]
};
在您的根目录下的 package.json
文件中指定您想要支持的浏览器:
"browserslist": ["defaults", "not ie < 11"]
在您的webpack.config.js
文件的module.rules
中,使用postcss-loader
指定您的加载器,紧跟着css-loader
(我还在使用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
}
],
},
使用 autoprefixer 和 postcss 以及 webpack 2.1.0-beta.27
的当前 webpack.config.js
配置文件:
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 ] } })
],
}
注意:LoaderOptionsPlugin是webpack =< 2.1.0-beta.24
中所需的“polyfill”。当我弄清新语法时,我会更新这个答案。
运行它:
在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"
}
以下是 package.json
中相关的脚本:
"scripts": {
"dev": "NODE_ENV=dev webpack-dev-server --port 3000 --inline --hot"
},
并且运行它
yarn install
npm run dev