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

源自：4-4 处理项目中的 css

为什么要把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 11:05

个回答

qbaty

2017-12-27 19:56:08

已采纳

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

0
彪子

2019-06-19 16:43:05

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

0
慕斯卡0766342

2018-04-11 19:36:14

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

0
慕粉1700361855

2017-10-21 15:57:39

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

0

小鸡啄米的嗨皮: 2017-08-21 13:21:25

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'
		})
	]
}

小鸡啄米的嗨皮

2017-08-21 13:20:29

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