为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/前端工具

/webpack深入与实战

关于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-15

源自：webpack深入与实战  4-4

关注问题 我要回答
22326
操作
收起

正在回答

18 回答

qbaty
2017-02-16

主要还是找不到post-css 的配置，你安装了 postcss-load-config ？你可以在项目下新建一个 postcss.config.js 来解决，webpack 中就不用写了

0 回复 有任何疑惑可以回复我~
收起回答
#1

小王子抓猫咪 提问者

我用webpack1.0的写法是没有问题的。 在webpack2.0中，我看官网上有两种形式，一种是按照老师你说的方式弄一个postcss.config.js 另外一个就是直接在webpack.config.js中进行配置。 原文是 We recommend to use postcss.config.js, but also you can specify plugins directly in webpack config.
2017-02-16 回复 有任何疑惑可以回复我~
daguaishou
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

                            ]

                        }

    }

    ]

   },

   ]

},

}


1 回复 有任何疑惑可以回复我~
收起回答
fdsgasgg
2017-06-24

http://img1.sycdn.imooc.com//594e822900012bd614140798.jpg

加上这个参数 

7 回复 有任何疑惑可以回复我~
收起回答
#1

bining

这个试过可行，非常谢谢！
2017-08-06 回复 有任何疑惑可以回复我~
#2

bining

不过在在官方文档中怎么没找到这个参数？
2017-08-06 回复 有任何疑惑可以回复我~
#3

fdsgasgg 回复 bining

https://webpack.js.org/guides/migrating/#complex-options
2017-08-15 回复 有任何疑惑可以回复我~
#4

学习_要努力

666
2017-09-04 回复 有任何疑惑可以回复我~
#5

慕田峪3933650

确实不错 很棒
2017-11-16 回复 有任何疑惑可以回复我~
#6

慕田峪3933650 回复 慕田峪3933650

确实不报错了 但是特的浏览器前缀没有加上
2017-11-16 回复 有任何疑惑可以回复我~
查看3条回复
qq_hypocrite_14118132
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'
        })
    ]
}


10 回复 有任何疑惑可以回复我~
收起回答
#1

qq_hypocrite_14118132

要先在命令行工具中输入 npm install postcss-import --save-dev 下载插件后才行
2017-06-12 回复 有任何疑惑可以回复我~
#2

qq_小指头_0 回复 qq_hypocrite_14118132

赞，看到这个的一瞬间，我就觉得一定找到答案了！ 版本为v3.4.1 亲测有效 感谢！
2017-07-31 回复 有任何疑惑可以回复我~
#3

见宁

亲测有效,漂亮!!!!
2017-08-02 回复 有任何疑惑可以回复我~
#4

bining

测过，可行，比较坑的是 @import 某个css文件时，后面一定要添加分号，要不然会警告并且无效，不知道其他人有没有这个问题，我添加上了分号就可以了，谢谢上面提供方案的同学
2017-08-06 回复 有任何疑惑可以回复我~
#5

鼎晨要住顶层

亲测可行！！！！！！
2017-08-10 回复 有任何疑惑可以回复我~
查看2条回复
小牛牛天天快乐
2017-06-02

var htmlWebpackPlugin = require('html-webpack-plugin');

var path = require('path');

var webpack = require('webpack');

module.exports = {

    entry :'./src/app.js',

    output : {

        path :__dirname+ './dist',

        filename : 'js/[name].bundle.js'

    },

    module : {

        rules : [

            {

                test : /\.js$/,

                loader : 'babel-loader',

                exclude : path.resolve(__dirname,'node_modules'),

                include : __dirname+'./src/',

                query : {

                    presets : ['latest']

                }

            },

            {

                test : /\.css$/,

                use : [

                    {

                        loader : 'style-loader'

                    },

                    {

                          loader: 'css-loader',

                          options: {

                            importLoaders: 1

                          }

                    },

                    {

                        loader: 'postcss-loader'

                    }

                ]

            }

        ]

    },

    plugins : [

        new htmlWebpackPlugin({

            filename : 'index.html',

            template : 'index.html',

            inject : 'body'

        }),

        new webpack.LoaderOptionsPlugin({

            options : {

                postcss : function(){

                    return [

                        require('autoprefixer')({

                            broswers : ['last 5 versions']

                        })

                    ];

                }

            }

        })

    ]

}


以上代码后打包成功，但是运行报错

http://img1.sycdn.imooc.com//5931836f0001a1ee06770474.jpg

http://img1.sycdn.imooc.com//593183700001415407360583.jpg

请问是怎么解决呢？


0 回复 有任何疑惑可以回复我~
收起回答
yangtongjie
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']
					})
				]
			}
		}
	})
	]
}

http://img1.sycdn.imooc.com//59132ae5000135ad14520776.jpg

0 回复 有任何疑惑可以回复我~
收起回答
最初的梦想gawin
2017-04-06

附上  less  配置


{
   test: /\.less$/,
   use: [
       'style-loader', 'css-loader', {
           loader: "postcss-loader",
           options: {
               plugins: function() {
                   return [
                       require('autoprefixer')
                   ];
               }
           }
       }, 'less-loader'
   ]
}

0 回复 有任何疑惑可以回复我~
收起回答
最初的梦想gawin
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 后面加参数了。。。。

1 回复 有任何疑惑可以回复我~
收起回答
tina_zhy
2017-03-16 
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
module.exports = {
	entry : './src/app.js',
	output : {
		path : './dist',
		filename : 'js/[name].bundle.js'
	},
	module : {
		rules : [
			{
				test : /\.js$/,
				loader : 'babel-loader',
				exclude : path.resolve(__dirname,'node_modules'),
				//exclude : './node_modules/',
				include : './src/',
				// 编译语言，方式1，方式2在package.json文件中
				query : {
					presets : ['latest']
				}
			},
			{
				test : /\.css$/,
				use : [
					{
						loader : 'style-loader'
					},
					{
				      	loader: 'css-loader',
				      	options: {
				        	importLoaders: 1
				      	}
				    },
				    {
						loader: 'postcss-loader'
						// options : {
						// 	plugins : function() {
						// 		return [
						// 			require('autoprefixer')({
						// 				broswers : ['last 5 versions']
						// 			})
						// 		];
						// 	}
						// }
					}
				]
			}
		]
	},
	plugins : [
		new htmlWebpackPlugin({
			filename : 'index.html',
			template : 'index.html',
			inject : 'body'
		}),
		new webpack.LoaderOptionsPlugin({
            options : {
            	postcss : function(){
            		return [
						require('autoprefixer')({
							broswers : ['last 5 versions']
						})
					];
            	}
            }
        })
	]
}


5 回复 有任何疑惑可以回复我~
收起回答
#1

JHoo

这个亲测有效，并且支持@import ‘xx.css’。感谢回答~~
2017-04-06 回复 有任何疑惑可以回复我~
#2

milaiduoduo

谢谢，亲测生效，并且对于css-loader，必须增加options: { importLoaders: 1} 才行。有下一段才能生效的。 { loader: 'css-loader', options: { importLoaders: 1 } },
2017-04-15 回复 有任何疑惑可以回复我~
#3

不浪漫

蛋疼 按你这个配置也不行。。 css-loader的options也下了importLoaders:1
2017-05-11 回复 有任何疑惑可以回复我~
SoooHy
2017-03-16

必须得配置postcss.config.js么？我也是按照官网在webpack.config.js中配置的，然后一样的错误，怎么解决的昂？= =求告知0.0

0 回复 有任何疑惑可以回复我~
收起回答
#1

小王子抓猫咪 提问者

第二种方案，我很早就写了解决办法。慕课的评论排版有问题。请把我的所有评论的发布时间看一下就知道了。
2017-03-16 回复 有任何疑惑可以回复我~
#2

SoooHy 回复 小王子抓猫咪 提问者

好的呢，哥
2017-03-16 回复 有任何疑惑可以回复我~
#3

我就是那个胖子 回复 小王子抓猫咪 提问者

关键是无效啊
2017-05-19 回复 有任何疑惑可以回复我~
首页上一页12下一页尾页

举报

0/150
提交
取消
webpack深入与实战
  • 参与学习       86572    人
  • 解答问题       721    个

webpack实战教程，用真实项目带你探索 webpack 强大的功能

进入课程

本课相似问答

2 回答webpack2.0配置中 options里面的importLoaders和mudule是什么意思？文档材料里面没找到

3 回答css-loader 的参数为什么加上报错

2 回答webpack css loader出错

1 回答去掉css里面的style-loader!css-loader!然后命令行加webpack hello.js bundle.js --module-bind 'css=style-loader!css-loader'报错

1 回答style-loader，css-loader打包CSS报错
搜索更多本课相关问答

关于webpack2.0里面css-loader的参数ImportLoaders配置出错

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信