第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

關于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

這是什么呢?



此題,我已經在下面自問自答了各位。

正在回答

18 回答

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

0 回復 有任何疑惑可以回復我~
#1

小王子抓貓咪 提問者

我用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.
2017-02-16 回復 有任何疑惑可以回復我~

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

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

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

? ? }

? ? ]

? ?},

? ?]

},

}


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

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

加上這個參數?

7 回復 有任何疑惑可以回復我~
#1

bining

這個試過可行,非常謝謝!
2017-08-06 回復 有任何疑惑可以回復我~
#2

bining

不過在在官方文檔中怎么沒找到這個參數?
2017-08-06 回復 有任何疑惑可以回復我~
#3

fdsgasgg 回復 bining

https://webpack.js.org/guides/migrating/#complex-options
2017-08-15 回復 有任何疑惑可以回復我~
#4

學習_要努力

666
2017-09-04 回復 有任何疑惑可以回復我~
#5

慕田峪3933650

確實不錯 很棒
2017-11-16 回復 有任何疑惑可以回復我~
#6

慕田峪3933650 回復 慕田峪3933650

確實不報錯了 但是特的瀏覽器前綴沒有加上
2017-11-16 回復 有任何疑惑可以回復我~
查看3條回復
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'
????????})
????]
}


10 回復 有任何疑惑可以回復我~
#1

qq_hypocrite_14118132

要先在命令行工具中輸入 npm install postcss-import --save-dev 下載插件后才行
2017-06-12 回復 有任何疑惑可以回復我~
#2

qq_小指頭_0 回復 qq_hypocrite_14118132

贊,看到這個的一瞬間,我就覺得一定找到答案了! 版本為v3.4.1 親測有效 感謝!
2017-07-31 回復 有任何疑惑可以回復我~
#3

見寧

親測有效,漂亮!!!!
2017-08-02 回復 有任何疑惑可以回復我~
#4

bining

測過,可行,比較坑的是 @import 某個css文件時,后面一定要添加分號,要不然會警告并且無效,不知道其他人有沒有這個問題,我添加上了分號就可以了,謝謝上面提供方案的同學
2017-08-06 回復 有任何疑惑可以回復我~
#5

鼎晨要住頂層

親測可行?。。。。?!
2017-08-10 回復 有任何疑惑可以回復我~
查看2條回復

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

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ];

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? })

? ? ]

}


以上代碼后打包成功,但是運行報錯

http://img1.sycdn.imooc.com//5931836f0001a1ee06770474.jpg

http://img1.sycdn.imooc.com//593183700001415407360583.jpg

請問是怎么解決呢?


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

大神,你好,我現在就是按照你上面的寫的配置的,但是還是說postcss的配置沒找到,以下是源碼和報錯截圖,麻煩大神看看

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

http://img1.sycdn.imooc.com//59132ae5000135ad14520776.jpg

0 回復 有任何疑惑可以回復我~
{
????loader:"postcss-loader",
????options:{
????????plugins:function(){
????????????return?[
????????????????require('precss'),
????????????????require('autoprefixer')
????????????]
????????}
????}
}

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

webpack.LoaderOptionsPlugin 是webpack 1 向 2 遷移時用的方法。

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

附上LESS 方法


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

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

附上 ?less ?配置


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

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

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 后面加參數了。。。。

1 回復 有任何疑惑可以回復我~
首頁上一頁12下一頁尾頁

舉報

0/150
提交
取消

關于webpack2.0里面css-loader的參數ImportLoaders配置出錯

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號