                        課程
                    
                        /前端開發(fā)
                        
                            /前端工具
                        
                        /webpack深入與實(shí)戰(zhàn)

關(guān)于webpack2.0里面css-loader的參數(shù)ImportLoaders配置出錯(cuò)

/*?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里面，如果是在一個(gè)CSS里面import另外一個(gè)CSS文件。

使用上面的loader配置，會(huì)報(bào)錯(cuò)

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官網(wǎng)上的實(shí)例配置的

https://www.npmjs.com/package/postcss-loader

這是什么呢？

此題，我已經(jīng)在下面自問自答了各位。

小王子抓貓咪

2017-02-15

源自：webpack深入與實(shí)戰(zhàn) 4-4

關(guān)注問題我要回答

22769

操作

收起

18 回答

qbaty
2017-02-16

主要還是找不到post-css 的配置，你安裝了?postcss-load-config ？你可以在項(xiàng)目下新建一個(gè) postcss.config.js 來解決，webpack 中就不用寫了

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

小王子抓貓咪提問者

我用webpack1.0的寫法是沒有問題的。在webpack2.0中，我看官網(wǎng)上有兩種形式，一種是按照老師你說的方式弄一個(gè)postcss.config.js 另外一個(gè)就是直接在webpack.config.js中進(jìn)行配置。原文是 We recommend to use postcss.config.js, but also you can specify plugins directly in webpack config.

2017-02-16 回復(fù) 有任何疑惑可以回復(fù)我~

daguaishou
2017-06-29

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

對(duì)于一直抱著個(gè)錯(cuò)誤，”Module?build?failed:?Error:?No?PostCSS?Config?found?in“

今天我仔細(xì)看了一下官方文檔，官網(wǎng)有作解釋：

webpack.config.js

{??

?loader:?'postcss-loader',??

????options:?{????

????????plugins:?(loader)?=>?[?????

?????????????require('postcss-import')({?

????????????????????root:?loader.resourcePath

?????????????????}),?????

?????????????require('postcss-cssnext')(),??????

?????????????require('autoprefixer')(),?????

?????????????require('cssnano')()???

?????????]

??}}

官網(wǎng)：https://www.npmjs.com/package/postcss-loader。

著這里我貼出我的代碼：

module.exports = {

//配置生成source maps，選擇合適的選項(xiàng)

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' //添加對(duì)樣式表的處理

? ? use:[

? ? {

? ? loader:'style-loader'

? ? },

? ? {

? ? loader:'css-loader',

? ? options:{

? ? importLoaders:1

? ? }

? ? },

? ? {

? ? loader:'postcss-loader',

? ? options: { ? ? ? ? ? // 如果沒有options這個(gè)選項(xiàng)將會(huì)報(bào)錯(cuò) No PostCSS Config found

? ? ? ? ? ? ? ? ? ? ? ? ? ? plugins: (loader) => [

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('postcss-import')({root: loader.resourcePath}),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('postcss-cssnext')(),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('autoprefixer')(), //CSS瀏覽器兼容

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('cssnano')() ?//壓縮css

? ? ? ? ? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? ? ? ? ? }

? ? }

? ? ]

? ?},

? ?]

}

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

fdsgasgg
2017-06-24

加上這個(gè)參數(shù)?

7 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

bining

這個(gè)試過可行，非常謝謝！

2017-08-06 回復(fù) 有任何疑惑可以回復(fù)我~

bining

不過在在官方文檔中怎么沒找到這個(gè)參數(shù)？

2017-08-06 回復(fù) 有任何疑惑可以回復(fù)我~

fdsgasgg 回復(fù) bining

https://webpack.js.org/guides/migrating/#complex-options

2017-08-15 回復(fù) 有任何疑惑可以回復(fù)我~

查看3條回復(fù)

qq_hypocrite_14118132
2017-06-12

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/'????//網(wǎng)站上線的地址
????},
????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'
????????})
????]
}

10 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

qq_hypocrite_14118132

要先在命令行工具中輸入 npm install postcss-import --save-dev 下載插件后才行

2017-06-12 回復(fù) 有任何疑惑可以回復(fù)我~

qq_小指頭_0 回復(fù) qq_hypocrite_14118132

贊，看到這個(gè)的一瞬間，我就覺得一定找到答案了！版本為v3.4.1 親測(cè)有效感謝！

2017-07-31 回復(fù) 有任何疑惑可以回復(fù)我~

見寧

親測(cè)有效,漂亮!!!!

2017-08-02 回復(fù) 有任何疑惑可以回復(fù)我~

查看2條回復(fù)

小牛牛天天快樂
2017-06-02

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

以上代碼后打包成功，但是運(yùn)行報(bào)錯(cuò)

請(qǐng)問是怎么解決呢？

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

yangtongjie
2017-05-10

大神，你好，我現(xiàn)在就是按照你上面的寫的配置的，但是還是說postcss的配置沒找到，以下是源碼和報(bào)錯(cuò)截圖，麻煩大神看看

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

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

街角咖啡
2017-04-13

{
????loader:"postcss-loader",
????options:{
????????plugins:function(){
????????????return?[
????????????????require('precss'),
????????????????require('autoprefixer')
????????????]
????????}
????}
}

在 require('autoprefixer') 之前加入?require('precss') 就可以了，不過還是不太明白原理，precss 插件從介紹來看應(yīng)該是用來支持saas語法的。

webpack.LoaderOptionsPlugin 是webpack 1 向 2 遷移時(shí)用的方法。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

最初的夢(mèng)想gawin
2017-04-06

附上LESS 方法

{
? ?test: /\.less$/,
? ?use: [
? ? ? ?'style-loader', 'css-loader', {
? ? ? ? ? ?loader: "postcss-loader",
? ? ? ? ? ?options: {
? ? ? ? ? ? ? ?plugins: function() {
? ? ? ? ? ? ? ? ? ?return [
? ? ? ? ? ? ? ? ? ? ? ?require('autoprefixer')
? ? ? ? ? ? ? ? ? ?];
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}, 'less-loader'
? ?]
}

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

最初的夢(mèng)想gawin
2017-04-06

附上 ?less ?配置

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

最初的夢(mèng)想gawin
2017-04-06

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 // 設(shè)置css模塊化
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}, {
? ? ? ? ? ? ? ?loader: 'postcss-loader',
? ? ? ? ? ? ? ?options: {
? ? ? ? ? ? ? ? ? ?plugins: function() {
? ? ? ? ? ? ? ? ? ? ? ?return [
? ? ? ? ? ? ? ? ? ? ? ? ? ?require('precss'),
? ? ? ? ? ? ? ? ? ? ? ? ? ?require('autoprefixer')
? ? ? ? ? ? ? ? ? ? ? ?];
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?]
? ?}