關于webpack2.0里面css-loader的參數ImportLoaders配置出錯
/*?webpack?2.0?*/
{
test:?/\.css$/,
use:?[
'style-loader',
{
loader:?'css-loader?importLoaders=1',
//?query:{
//? importLoaders?:?1
//?}
},
{
loader:?'postcss-loader',
options:?{
plugins:function(){
return?[
require('autoprefixer')({
browsers:?["last?5?versions"]
})
];
}
}
}
]
}老師，在webpack2.0里面，如果是在一個CSS里面import另外一個CSS文件。
使用上面的loader配置，會報錯
ERROR?in?./~/css-loader?importLoaders=1!./~/postcss-loader?{}!./css/common.css
Module?build?failed:?Error:?No?PostCSS?Config?found?in:?E:\webfrontend\npmstudy\webpack-first-demo\css
????at?Error?(native)
????at?E:\webfrontend\npmstudy\webpack-first-demo\node_modules\postcss-load-config\index.js:51:26
?@?./~/css-loader?importLoaders=1!./~/postcss-loader?{}!./css/layer.css?3:10-134
?@?./css/layer.css
?@?./index.js我是按照postcss-loader的npm官網上的實例配置的
https://www.npmjs.com/package/postcss-loader
這是什么呢？
此題，我已經在下面自問自答了各位。
2017-03-16
必須得配置postcss.config.js么？我也是按照官網在webpack.config.js中配置的，然后一樣的錯誤，怎么解決的昂？= =求告知0.0
2017-03-08
也還是不行
2017-03-07
????module:{ ????????rules:[ ????????????{ ????????????????test:/\.js$/, ????????????????include:path.resolve(__dirname,'src'), ????????????????exclude:path.resolve(__dirname,'node_modules'), ????????????????use:?'babel-loader' ????????????}, ????????????{ ????????????????test:/\.css$/, ????????????????use:[?'style-loader',?'css-loader?importLoaders=1', ????????????????{ ????????????????????loader:'postcss-loader', ????????????????????options:{ ????????????????????????plugins:function(){ ????????????????????????????return?[ ????????????????????????????????require('autoprefixer')({broswers:['last?5?versions']}) ????????????????????????????]; ????????????????????????} ????????????????????} ????????????????}?] ????????????}, ????????] ????},不添加新的配置文件，這樣寫可以通過
2017-03-07
css-loader 文檔已經更新，推薦使用下面數組的方式，可以使用
module.exports?=?{ ??module:?{ ????rules:?[ ??????{ ????????test:?/\.css$/, ????????use:?[?'style-loader',?'css-loader'?] ??????} ????] ??} }2017-02-18
第二種方式的問題已經找到解決方案
在webpack2.0里的webpack.config.js中，已經不在允許用戶自定義options的key值了。也就是說不能在
module.exports={...}這里面將postcss作為一個Key啦。錯誤提示告訴用戶，需要使用
LoaderOptionsPlugin
//解決方案 module.exports?=?{ ????plugins:?[ ????????new?webpack.LoaderOptionsPlugin({ ????????????options:?{ ????????????????postcss:?function(){ ????????????????????return?[ ????????????????????????require("autoprefixer")({ ????????????????????????????browsers:?['ie>=8','>1%?in?CN'] ????????????????????????}) ????????????????????] ????????????????} ????????????} ????????}) ????] }2017-02-16
use:?[ 'style-loader', { loader:?'css-loader', options:?{ importLoaders:?1 } }, { loader:?'postcss-loader' } ]新建postcss.config.js
module.exports?=?{ plugins:?[ require('autoprefixer')({ browsers:?["last?5?versions"] }) ] }這種方式可行。
目前還不知道為什么第二種方式不行！
2017-02-16
不給css-loader加參數importLoaders=1 是能夠正常打包的，不會提示錯誤。但是對于包含@import方式的css就不能進行前綴等轉換了。
但是加上importLoaders=1 再打包就會報錯了。
我真不知道具體原因是什么。
2017-02-16
主要還是找不到post-css 的配置，你安裝了?postcss-load-config ？你可以在項目下新建一個 postcss.config.js 來解決，webpack 中就不用寫了