                        课程
                    
                        /前端开发
                        
                            /前端工具
                        
                        /webpack深入与实战

webpack2中 postcss-loader报错no config found

module:{
		rules: [
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: path.resolve(__dirname, "node_modules"),
			},{
				test: /\.css$/,
		        use: [
		          "style-loader", 
		          "css-loader?importLoaders=1", //这里是为了把css里的@import先执行第一个loader
		          {
		            loader: "postcss-loader",
		            // options: {
		            //   plugins: (loader)=>[
		            //     require('autoprefixer')({
		            //         browsers:['last 5 versions']
		            //     })
		            //   ]
		            // },
		          }
		        ],

			}
		]
	},
	plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: function(){
                    return [
                        require("autoprefixer")({
                            browsers: ['last 5 versions']
                        })
                    ]
                }
            }
        })
    ]

如上图，不管是直接在loader那里用options配置，或者使用LoaderOptionsPlugin，都会报错。

慕仰8663029

2017-05-22

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

关注问题我要回答

5271

操作

收起

6 回答

云天明的DX3906
2017-12-24

谢谢老哥，终于可以让我睡觉了2017/12/24 上午2:04:07

//新建一个postcss.config.js，里面写入

module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: ['last 5 versions']
        })
    ]
}

//回到webpack.config.js

rules:[
  {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            },
            {
                test:/\.scss$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            }
]

0 回复有任何疑惑可以回复我~

高人一等193
2017-08-11

var htmlWebpackPlugin=require('html-webpack-plugin');
var path=require('path');
module.exports = {
entry:'./src/app.js',
output: {
path:__dirname+'/dist',
filename: 'js/[name].bundle.js'
},
module:{
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
//exclude:__dirname+'/node_modules/',
//include:__dirname+'/src/',
exclude:path.resolve(__dirname,'node_modules'),
include:path.resolve(__dirname,'src'),
query: {
   "presets":["latest"]
}
},
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{
loader:'css-loader',
options:{
importLoaders: 1
}
},
{
loader:'postcss-loader',
options:{
ident:'postcss-ident',
plugins:function(){
return [
require('autoprefixer')
]
}
}
}
]
}
]
},
plugins: [
        new htmlWebpackPlugin({
        filename:'index.html',
        template:'index.html',
        inject:'body'
        })
    ]
}

请无视上面的，这样来就可以了 样式用@import引别的样式表进来的也能解析了

1 回复有任何疑惑可以回复我~

#1

按照你这样说的做了，但是引入的css文件不会自动添加前缀啊。。。

2017-09-19 回复有任何疑惑可以回复我~

#2

叶梓欣回复龍龖龘88

我按照他的方法做的，会自动添加前缀呀。没毛病的老铁~

2018-02-08 回复有任何疑惑可以回复我~

#3

亲测可以~谢谢~

2018-02-08 回复有任何疑惑可以回复我~

高人一等193
2017-08-11

module:{
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
exclude:path.resolve(__dirname,'node_modules'),
include:path.resolve(__dirname,'src'),
query: {
   "presets":["latest"]
}
},
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'},
{
loader:'postcss-loader',
options:{
plugins:function(){
return [
require('autoprefixer')
]
}
}
}
]
}
]
},

这样整就可以了，视频里面的版本太低，那样走会报错

1 回复有任何疑惑可以回复我~

小小辣条
2017-07-07

遇到同样的问题，

0 回复有任何疑惑可以回复我~

TCircley
2017-06-08

我也同样遇到这种问题...只要是在css中使用了@import，无论是在哪里配置postcss-loader都报错

后来使用postcss.config.js进行配置就OK，我也不懂为什么

在项目根目录下创建一个postcss.config.js文件，配置如下

module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: ['last 5 versions']
        })
    ]
}

4 回复有任何疑惑可以回复我~

#1

你好，这个配置完了呢，还要做什么呀，为什么我配置完了还是没起作用呢

2017-06-12 回复有任何疑惑可以回复我~

#2

慕粉1347583349

按照楼上这么写是可以的，但是也是不理解新建一个postcss.config.js文件及代码的意思啊。。

2017-12-10 回复有任何疑惑可以回复我~

#3

云天明的DX3906

谢谢老哥，终于可以让我睡觉了2017/12/24 上午2:04:07

2017-12-24 回复有任何疑惑可以回复我~

查看1条回复

心有猛虎_细嗅蔷薇
2017-05-23

npm install css-loader style-loader --save-dev
require('style.loader!css-loader!./[name].css')

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

webpack深入与实战

参与学习 86554 人
解答问题 750 个

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

本课相似问答

2 回答no poatCss Config found in?

10 回答image-webpack-loader 在webpack2中使用出错

1 回答postcss-loader这样配置报错

6 回答postcss-loader

2 回答postcss-loader的问题

搜索更多本课相关问答

webpack2中 postcss-loader报错no config found

我要回答关注问题

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号