關于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-02-16
主要還是找不到post-css 的配置，你安裝了?postcss-load-config ？你可以在項目下新建一個 postcss.config.js 來解決，webpack 中就不用寫了
2017-06-29
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
對于一直抱著個錯誤，”Module?build?failed:?Error:?No?PostCSS?Config?found?in“
今天我仔細看了一下官方文檔，官網有作解釋：
webpack.config.js
{??
?loader:?'postcss-loader',??
????options:?{????
????????plugins:?(loader)?=>?[?????
?????????????require('postcss-import')({?
????????????????????root:?loader.resourcePath
?????????????????}),?????
?????????????require('postcss-cssnext')(),??????
?????????????require('autoprefixer')(),?????
?????????????require('cssnano')()???
?????????]
??}}
官網：https://www.npmjs.com/package/postcss-loader。
著這里我貼出我的代碼：
module.exports = {
//配置生成source maps，選擇合適的選項
devtool:'eval-source-map',
//入口
entry:__dirname + "/app/main.js",
//輸出
output:{
path:__dirname + "/dist/js",
filename:"bundle.js"
},
//Loader
module: {
? ?loaders: [
? ?{
? ? ? ? ? ?test: /\.json$/,
? ? ? ? ? ?loader: "json-loader"
? ? ? ?},
? ?{
? ? test:/\.js$/,
? ? exclude:/node_modules/,
? ? loader:'babel-loader',
? ? query:{
? ? presets:['es2015','react']
? ? }
? ?},
? ?{
? ? test:/\.css$/,
? ? //loader:'style-loader!css-loader!postcss-loader' //添加對樣式表的處理
? ? use:[
? ? {
? ? loader:'style-loader'
? ? },
? ? {
? ? loader:'css-loader',
? ? options:{
? ? importLoaders:1
? ? }
? ? },
? ? {
? ? loader:'postcss-loader',
? ? options: { ? ? ? ? ? // 如果沒有options這個選項將會報錯 No PostCSS Config found
? ? ? ? ? ? ? ? ? ? ? ? ? ? plugins: (loader) => [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('postcss-import')({root: loader.resourcePath}),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('postcss-cssnext')(),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('autoprefixer')(), //CSS瀏覽器兼容
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('cssnano')() ?//壓縮css
? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? ? }
? ? }
? ? ]
? ?},
? ?]
},
}
2017-06-24
加上這個參數?
2017-06-12
var?htmlWebpackPlugin?=?require('html-webpack-plugin'); const?path?=?require('path'); module.exports?=?{ ????entry:?'./src/app.js', ????output:{ ????????path:?__dirname?+?'/dist', ????????filename:'js/[name].bundle.js', ????????//publicPath:'http://cdn.com/'????//網站上線的地址 ????}, ????module:{ ????????rules:[ ????????????{ ????????????????test:?/\.js$/, ????????????????//include:__dirname?+?'./src/',//選擇范圍 ????????????????//exclude:__dirname?+?'./node_modules/',//排除范圍 ????????????????exclude:?[ ????????????????????path.resolve(__dirname,?"node_modules/") ????????????????],//排除范圍 ????????????????include:?[ ????????????????????path.resolve(__dirname,?"src") ????????????????],//選擇范圍 ????????????????loader:'babel-loader', ????????????????options:?{ ????????????????????presets:?['env'] ????????????????} ????????????}, ????????????{ ????????????????test:/\.css$/, ????????????????use:[ ????????????????????'style-loader', ????????????????????{loader:'css-loader',options:{importLoaders:1}}, ????????????????????{ ????????????????????????loader:'postcss-loader', ????????????????????????options:{ ????????????????????????????plugins:function(){ ????????????????????????????????return?[ ????????????????????????????????????require('postcss-import')(),????????//一定要寫在require("autoprefixer")前面，否則require("autoprefixer")無效 ????????????????????????????????????require("autoprefixer")({browsers:['last?5?versions']}) ????????????????????????????????] ????????????????????????????} ????????????????????????} ????????????????????} ????????????????] ????????????} ????????] ????}, ????plugins:?[ ????????new?htmlWebpackPlugin({ ????????????filename:'index.html', ????????????template:'index.html', ????????????inject:'body' ????????}) ????] }2017-06-02
以上代碼后打包成功，但是運行報錯
請問是怎么解決呢？
2017-05-10
大神，你好，我現在就是按照你上面的寫的配置的，但是還是說postcss的配置沒找到，以下是源碼和報錯截圖，麻煩大神看看
var?path?=?require('path'); var?htmWebpackPlugin?=?require('html-webpack-plugin'); var?webpack?=?require('webpack'); module.exports={ context:?__dirname, entry:??'./src/app.js', output:{ path:?path.resolve(__dirname,'dist'), filename:?'js/[name].bundle.js' }, module:?{ loaders:?[ { test:?/\.js$/, loader:?'babel-loader', exclude:?__dirname+'./node_modules', include:?__dirname+'./src/', options:?{ 'presets':?['latest'] } }, { test:?/\.css$/, use:?[ { loader:?'style-loader' }, { loader:?'css-loader', options:?{ importLoaders:1 } }, { loader:?'postcss-loader' } ] } ] }, plugins:?[ new?htmWebpackPlugin({ filename:?'index.html', template:?'index.html', inject:?'body' }), new?webpack.LoaderOptionsPlugin({ options:?{ postcss:?function(){ return?[ require('autoprefixer')({ broswers:?['last?5?versions'] }) ] } } }) ] }2017-04-13
{ ????loader:"postcss-loader", ????options:{ ????????plugins:function(){ ????????????return?[ ????????????????require('precss'), ????????????????require('autoprefixer') ????????????] ????????} ????} }在 require('autoprefixer') 之前加入?require('precss') 就可以了，不過還是不太明白原理，precss 插件從介紹來看應該是用來支持saas語法的。
webpack.LoaderOptionsPlugin 是webpack 1 向 2 遷移時用的方法。
2017-04-06
附上LESS 方法
{
? ?test: /\.less$/,
? ?use: [
? ? ? ?'style-loader', 'css-loader', {
? ? ? ? ? ?loader: "postcss-loader",
? ? ? ? ? ?options: {
? ? ? ? ? ? ? ?plugins: function() {
? ? ? ? ? ? ? ? ? ?return [
? ? ? ? ? ? ? ? ? ? ? ?require('autoprefixer')
? ? ? ? ? ? ? ? ? ?];
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}, 'less-loader'
? ?]
}
2017-04-06
附上 ?less ?配置
{
? ?test: /\.less$/,
? ?use: [
? ? ? ?'style-loader', 'css-loader', {
? ? ? ? ? ?loader: "postcss-loader",
? ? ? ? ? ?options: {
? ? ? ? ? ? ? ?plugins: function() {
? ? ? ? ? ? ? ? ? ?return [
? ? ? ? ? ? ? ? ? ? ? ?require('autoprefixer')
? ? ? ? ? ? ? ? ? ?];
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}, 'less-loader'
? ?]
}
2017-04-06
rules: [
? ?{
? ? ? ?test: /\.js$/,
? ? ? ?include: path.resolve(__dirname,'src'),
? ? ? ?exclude: path.resolve(__dirname,'node_modules'),
? ? ? ?loader: "babel-loader"
? ?},
? ?{
? ? ? ?test: /\.css$/,
? ? ? ?use: [
? ? ? ? ? ?'style-loader', {
? ? ? ? ? ? ? ?loader: 'css-loader',
? ? ? ? ? ? ? ?options: {
? ? ? ? ? ? ? ? ? ?// modules: true // 設置css模塊化
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}, {
? ? ? ? ? ? ? ?loader: 'postcss-loader',
? ? ? ? ? ? ? ?options: {
? ? ? ? ? ? ? ? ? ?plugins: function() {
? ? ? ? ? ? ? ? ? ? ? ?return [
? ? ? ? ? ? ? ? ? ? ? ? ? ?require('precss'),
? ? ? ? ? ? ? ? ? ? ? ? ? ?require('autoprefixer')
? ? ? ? ? ? ? ? ? ? ? ?];
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?]
? ?}
//require('precss'), ?加上這個就可以了 ?不用加額外的東西 ?安裝下 precss ? webpack2 ?不支持css-loader 后面加參數了。。。。