关于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
这是什么呢？
此题，我已经在下面自问自答了各位。
个回答
-
- qbaty
- 2017-02-16 11:47:03
主要还是找不到post-css 的配置，你安装了 postcss-load-config ？你可以在项目下新建一个 postcss.config.js 来解决，webpack 中就不用写了
-
- daguaishou
- 2017-06-29 14:26:27
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
]
}
}
]
},
]
},
}
-
- fdsgasgg
- 2017-06-24 23:16:13
加上这个参数
-
- qq_hypocrite_14118132
- 2017-06-12 17:07:29
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' }) ] } -
- 小牛牛天天快乐
- 2017-06-02 23:25:57
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']
})
];
}
}
})
]
}
以上代码后打包成功，但是运行报错
请问是怎么解决呢？
-
- yangtongjie
- 2017-05-10 22:59:54
大神，你好，我现在就是按照你上面的写的配置的，但是还是说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'] }) ] } } }) ] }
-
- 街角咖啡
- 2017-04-13 15:33:21
{ loader:"postcss-loader", options:{ plugins:function(){ return [ require('precss'), require('autoprefixer') ] } } }在 require('autoprefixer') 之前加入 require('precss') 就可以了，不过还是不太明白原理，precss 插件从介绍来看应该是用来支持saas语法的。
webpack.LoaderOptionsPlugin 是webpack 1 向 2 迁移时用的方法。
-
- 最初的梦想gawin
- 2017-04-06 18:05:48
附上LESS 方法
{
test: /\.less$/,
use: [
'style-loader', 'css-loader', {
loader: "postcss-loader",
options: {
plugins: function() {
return [
require('autoprefixer')
];
}
}
}, 'less-loader'
]
} -
- 最初的梦想gawin
- 2017-04-06 18:04:48
附上 less 配置
{
test: /\.less$/,
use: [
'style-loader', 'css-loader', {
loader: "postcss-loader",
options: {
plugins: function() {
return [
require('autoprefixer')
];
}
}
}, 'less-loader'
]
} -
- 最初的梦想gawin
- 2017-04-06 18:02:52
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 后面加参数了。。。。
-
- tina_zhy
- 2017-03-16 15:27:08
var htmlWebpackPlugin = require('html-webpack-plugin'); var path = require('path'); var webpack = require('webpack'); module.exports = { entry : './src/app.js', output : { path : './dist', filename : 'js/[name].bundle.js' }, module : { rules : [ { test : /\.js$/, loader : 'babel-loader', exclude : path.resolve(__dirname,'node_modules'), //exclude : './node_modules/', include : './src/', // 编译语言，方式1，方式2在package.json文件中 query : { presets : ['latest'] } }, { test : /\.css$/, use : [ { loader : 'style-loader' }, { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'postcss-loader' // options : { // plugins : function() { // return [ // require('autoprefixer')({ // broswers : ['last 5 versions'] // }) // ]; // } // } } ] } ] }, plugins : [ new htmlWebpackPlugin({ filename : 'index.html', template : 'index.html', inject : 'body' }), new webpack.LoaderOptionsPlugin({ options : { postcss : function(){ return [ require('autoprefixer')({ broswers : ['last 5 versions'] }) ]; } } }) ] } -
- SoooHy
- 2017-03-16 12:42:35
必须得配置postcss.config.js么？我也是按照官网在webpack.config.js中配置的，然后一样的错误，怎么解决的昂？= =求告知0.0
-
- 鱼干的马甲
- 2017-03-08 15:34:50
也还是不行
-
- 窒息炙刃
- 2017-03-07 23:06:50
module:{ rules:[ { test:/\.js$/, include:path.resolve(__dirname,'src'), exclude:path.resolve(__dirname,'node_modules'), use: 'babel-loader' }, { test:/\.css$/, use:[ 'style-loader', 'css-loader?importLoaders=1', { loader:'postcss-loader', options:{ plugins:function(){ return [ require('autoprefixer')({broswers:['last 5 versions']}) ]; } } } ] }, ] },不添加新的配置文件，这样写可以通过
-
- 窒息炙刃
- 2017-03-07 16:59:54
css-loader 文档已经更新，推荐使用下面数组的方式，可以使用
module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } } -
- 小王子抓猫咪
- 2017-02-18 12:36:29
第二种方式的问题已经找到解决方案
在webpack2.0里的webpack.config.js中，已经不在允许用户自定义options的key值了。也就是说不能在
module.exports={...}这里面将postcss作为一个Key啦。错误提示告诉用户，需要使用
LoaderOptionsPlugin//解决方案 module.exports = { plugins: [ new webpack.LoaderOptionsPlugin({ options: { postcss: function(){ return [ require("autoprefixer")({ browsers: ['ie>=8','>1% in CN'] }) ] } } }) ] } -
- 小王子抓猫咪
- 2017-02-16 13:59:08
use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'postcss-loader' } ]新建postcss.config.js
module.exports = { plugins: [ require('autoprefixer')({ browsers: ["last 5 versions"] }) ] }这种方式可行。
目前还不知道为什么第二种方式不行！
-
- 小王子抓猫咪
- 2017-02-16 13:40:56
不给css-loader加参数importLoaders=1 是能够正常打包的，不会提示错误。但是对于包含@import方式的css就不能进行前缀等转换了。
但是加上importLoaders=1 再打包就会报错了。
我真不知道具体原因是什么。