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

为什么要把postcss-loader单独写在postcss.config.js里才可以解决问题？为什么不能全部写在webpack.config.js里

ERROR in ./node_modules/css-loader?importLoaders=1!./node_modules/postcss-loader/lib?{"plugins":[null]}!./src/css/flex.css

Module build failed: TypeError: Cannot read property 'postcss' of null

at Processor.normalize (/Users/apple/web-demo/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:136:12)

at new Processor (/Users/apple/web-demo/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:51:25)

at postcss (/Users/apple/web-demo/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:73:10)

at Promise.resolve.then.then (/Users/apple/web-demo/node_modules/postcss-loader/lib/index.js:137:12)

@ ./node_modules/css-loader?importLoaders=1!./node_modules/postcss-loader/lib?{"plugins":[null]}!./src/css/common.css 3:10-156

@ ./src/css/common.css

@ ./src/app.js

为什么要把postcss-loader单独写在postcss.config.js里才可以解决问题？为什么不能全部写在webpack.config.js里

budflower

2017-08-01

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

关注问题我要回答

11806

操作

收起

6 回答

qbaty 回答被采纳 +2 积分
2017-12-27

因为你在loader 中引用了插件，但是没有指明是谁的插件，需要制定一个ident，唯一标识

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

收起回答

彪子
2019-06-19

??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????E森林eslint

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

收起回答

慕斯卡0766342
2018-04-11

推荐一个vue工程化实践教程：http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9?affid=imooc7878

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

收起回答

慕粉1700361855
2017-10-21

我也遇到了这个问题，写进去会报错

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

收起回答

小鸡啄米的嗨皮
2017-08-21

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: {
		rules: [{
			test: /\.css$/,
			use: ['style-loader', 'css-loader', {
				loader: 'postcss-loader',
				options: {
					plugins: [
						require("autoprefixer")({browserslist: ["last 2 versions"]})
					]
				}
			}]
		}],
		loaders: [{
			test: /\.js$/,
			loader: 'babel-loader',
			exclude: path.resolve(__dirname, 'node_modules'),
			include: '/src/',
			query: {
				presets: ['es2016']
			}
		}]
	},
	plugins: [
		new htmlWebpackPlugin({
			filename: 'index.html',
			template: 'index.html',
			inject: 'body'
		})
	]
}

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

收起回答

小鸡啄米的嗨皮
2017-08-21

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: {

rules: [{

test: /\.css$/,

use: ['style-loader', 'css-loader', {

loader: 'postcss-loader',

options: {

plugins: [

require("autoprefixer")({browserslist: ["last 2 versions"]})

]

}

}]

}],

loaders: [{

test: /\.js$/,

loader: 'babel-loader',

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

include: '/src/',

query: {

presets: ['es2016']

}

}]

plugins: [

new htmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: 'body'

})

]

}

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

收起回答

0/150

提交

取消

webpack深入与实战

参与学习 86555 人
解答问题 721 个

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

进入课程

本课相似问答

12 回答为什么在webpack.config.js里plugin的里面，chunks这个会报错

2 回答[关于postcss-loader问题的有效解决方案]

2 回答postcss-loader的问题

6 回答postcss-loader

1 回答postcss-loader 有版本问题

搜索更多本课相关问答

为什么要把postcss-loader单独写在postcss.config.js里才可以解决问题？为什么不能全部写在webpack.config.js里

我要回答关注问题

热搜

最近搜索清空

为什么要把postcss-loader单独写在postcss.config.js里才可以解决问题？为什么不能全部写在webpack.config.js里

6 回答

本课相似问答

为什么要把postcss-loader单独写在postcss.config.js里才可以解决问题？为什么不能全部写在webpack.config.js里