为了账号安全,请及时绑定邮箱和手机立即绑定
关注
小王子抓猫咪

关于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 19854 浏览 18 回答

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

2017-02-16
回复 0

小王子抓猫咪 (提问者)

我用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.
#1 2017-02-16 回复
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-12
回复 10

qq_hypocrite_14118132

要先在命令行工具中输入 npm install postcss-import --save-dev 下载插件后才行
#1 2017-06-12 回复

qq_小指头_0 回复 qq_hypocrite_14118132

赞,看到这个的一瞬间,我就觉得一定找到答案了! 版本为v3.4.1 亲测有效 感谢!
#2 2017-07-31 回复

见宁

亲测有效,漂亮!!!!
#3 2017-08-02 回复
点击展开后面2条评论

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

加上这个参数 

2017-06-24
回复 7

bining

这个试过可行,非常谢谢!
#1 2017-08-06 回复

bining

不过在在官方文档中怎么没找到这个参数?
#2 2017-08-06 回复

fdsgasgg 回复 bining

https://webpack.js.org/guides/migrating/#complex-options
#3 2017-08-15 回复
点击展开后面3条评论

第二种方式的问题已经找到解决方案

在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-18
回复 5

鱼干的马甲

你这种方法可行。webpack好坑
#1 2017-03-09 回复

hylobates

已经解决,非常感谢!不过我在官网没有找到这个说明,不知道你是在哪个页面看到的呢?能否给个链接?
#2 2017-03-21 回复

打不倒的小成c

哟on过了这种方法还是报错啊
#3 2017-05-13 回复
点击展开后面3条评论
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']
						})
					];
            	}
            }
        })
	]
}


2017-03-16
回复 5

JHoo

这个亲测有效,并且支持@import ‘xx.css’。感谢回答~~
#1 2017-04-06 回复

milaiduoduo

谢谢,亲测生效,并且对于css-loader,必须增加options: { importLoaders: 1} 才行。有下一段才能生效的。 { loader: 'css-loader', options: { importLoaders: 1 } },
#2 2017-04-15 回复

不浪漫

蛋疼 按你这个配置也不行。。 css-loader的options也下了importLoaders:1
#3 2017-05-11 回复
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
回复 2

小王子抓猫咪 (提问者)

第二种方案在楼上一层
#1 2017-03-16 回复

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

LoaderOptionsPlugin这种方法也不可以了现在
#2 2017-05-12 回复

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

我也是 不知道你解决了没有,求教
#3 2017-05-13 回复
    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
回复 1

欧耶233

亲测有用
#1 2017-03-15 回复

SoooHy

并不能行= =
#2 2017-03-16 回复

Malenconia príncep

我也是不行 用的最新的webpack2 还是提示 postcss config not found , 但用 postcss.config.js 会报 Node#before is deprecated. Use Node#raws.before 不知道怎么解决
#3 2017-05-09 回复
点击展开后面2条评论

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 后面加参数了。。。。

2017-04-06
回复 1

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-29
回复 1

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

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

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

2017-02-16
回复 0

鱼干的马甲

原因还找到没有?同问
#1 2017-03-08 回复

qq_白水_33203092 回复 鱼干的马甲

我今天也是遇到这个问题 不解
#2 2017-03-08 回复

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

我也遇到了这个问题 求解
#3 2017-05-13 回复
点击展开后面2条评论
首页上一页12下一页尾页

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信