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

课程

/前端开发

/前端工具

/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

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

正在回答

18 回答

窒息炙刃
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']})
                            ];
                        }
                    }
                } ]
            },
        ]
    },

不添加新的配置文件，这样写可以通过

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

欧耶233

亲测有用
2017-03-15 回复 有任何疑惑可以回复我~
#2

SoooHy

并不能行= =
2017-03-16 回复 有任何疑惑可以回复我~
#3

Malenconia príncep

我也是不行 用的最新的webpack2 还是提示 postcss config not found , 但用 postcss.config.js 会报 Node#before is deprecated. Use Node#raws.before 不知道怎么解决
2017-05-09 回复 有任何疑惑可以回复我~
#4

不浪漫

蛋疼了 看postcss官网的方法不行 @tina_zhy 同学的也不行。但是你这个可以 ，奇怪了 。官网没见这么写的啊。
2017-05-11 回复 有任何疑惑可以回复我~
查看2条回复
窒息炙刃
2017-03-07

css-loader 文档已经更新，推荐使用下面数组的方式，可以使用

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}


0 回复 有任何疑惑可以回复我~
收起回答
小王子抓猫咪 提问者
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']
                        })
                    ]
                }
            }
        })
    ]
}


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

鱼干的马甲

你这种方法可行。webpack好坑
2017-03-09 回复 有任何疑惑可以回复我~
#2

hylobates

已经解决，非常感谢！不过我在官网没有找到这个说明，不知道你是在哪个页面看到的呢？能否给个链接？
2017-03-21 回复 有任何疑惑可以回复我~
#3

打不倒的小成c

哟on过了这种方法还是报错啊
2017-05-13 回复 有任何疑惑可以回复我~
#4

打不倒的小成c 回复 打不倒的小成c

用了这种
2017-05-13 回复 有任何疑惑可以回复我~
#5

qq_hypocrite_14118132

还是报错：ERROR in ./~/css-loader?importLoaders=1!./~/postcss-loader/lib?{}!./src/css/flex.css Module build failed: Error: No PostCSS Config found in: D:\nodejs\node_global\node_modules\webpack-test\src\css at Error (native)
2017-06-12 回复 有任何疑惑可以回复我~
#6

Simon_zcz 回复 qq_hypocrite_14118132

我跟你一样
2017-06-15 回复 有任何疑惑可以回复我~
查看3条回复
小王子抓猫咪 提问者
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"]
		})
	]
}

这种方式可行。


目前还不知道为什么第二种方式不行！

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

小王子抓猫咪 提问者

第二种方案在楼上一层
2017-03-16 回复 有任何疑惑可以回复我~
#2

雲上在飘雨 回复 小王子抓猫咪 提问者

LoaderOptionsPlugin这种方法也不可以了现在
2017-05-12 回复 有任何疑惑可以回复我~
#3

打不倒的小成c 回复 雲上在飘雨

我也是 不知道你解决了没有，求教
2017-05-13 回复 有任何疑惑可以回复我~
小王子抓猫咪 提问者
2017-02-16

不给css-loader加参数importLoaders=1 是能够正常打包的，不会提示错误。但是对于包含@import方式的css就不能进行前缀等转换了。

但是加上importLoaders=1 再打包就会报错了。

我真不知道具体原因是什么。

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

鱼干的马甲

原因还找到没有？同问
2017-03-08 回复 有任何疑惑可以回复我~
#2

慕桂英9005916 回复 鱼干的马甲

我今天也是遇到这个问题 不解
2017-03-08 回复 有任何疑惑可以回复我~
#3

打不倒的小成c 回复 qq_不訁嬡_0

我也遇到了这个问题 求解
2017-05-13 回复 有任何疑惑可以回复我~
#4

心晴0623

同求，，
2017-05-23 回复 有任何疑惑可以回复我~
查看2条回复
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 回复 有任何疑惑可以回复我~
首页上一页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下载
官方微信