关于webpack的版本导致的postcss-loader的问题
来源自问题
!!!发现这解决方案还是不能用,估计是webpack又更新了一轮,请看看下下方的答案
某个版本webpack的解决方案的复制(亲测webpack v2.4.1是不能用的):
plugins: {
new webpack.LoaderOptionsPlugin({
options: {
postcss: function () {
return [precss, autoprefixer];
},
devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true //实时刷新
}
}
})
}
这是另外一个地方的答案范本,亲测可用
module:{
loaders:[{
test:/\.js$/,
loader:'babel-loader',
exclude:path.resolve(__dirname,'/node_modules/'),
include:path.resolve(__dirname,'/src/'),
query:{
presets:["es2015"]
}
},{
test:/\.css$/,
use:[
"style-loader",
{
loader:"css-loader",
options:{importLoaders:1}
// 上面这句话的意思为如果css中有import进来的文件也进行处理
},
{
loader:"postcss-loader",
options:{
plugins:(loader)=>[require('autoprefixer')()]
}
}]
}]
},
plugins:[
new htmlWebpackPlugin({
filename:'index.html',
template:'index.html',
inject:'body'
})
]
如果是在webpack中的另一种语法中,那么要这样使用?
loader:'style-loader!css-loader?importLoaders=1!postcss-loader'
这里的?是起一种传参的作用。
一遍一遍的咀嚼,总会烂的。