问答详情
源自：1-1 webpack 基本介绍

webpack2中 postcss-loader报错no config found

module:{
		rules: [
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: path.resolve(__dirname, "node_modules"),
			},{
				test: /\.css$/,
		        use: [
		          "style-loader", 
		          "css-loader?importLoaders=1", //这里是为了把css里的@import先执行第一个loader
		          {
		            loader: "postcss-loader",
		            // options: {
		            //   plugins: (loader)=>[
		            //     require('autoprefixer')({
		            //         browsers:['last 5 versions']
		            //     })
		            //   ]
		            // },
		          }
		        ],

			}
		]
	},
	plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: function(){
                    return [
                        require("autoprefixer")({
                            browsers: ['last 5 versions']
                        })
                    ]
                }
            }
        })
    ]

如上图，不管是直接在loader那里用options配置，或者使用LoaderOptionsPlugin，都会报错。

http://img.mukewang.com/59229d2f00013da507680100.jpg

提问者：慕仰8663029 2017-05-22 16:12

个回答

  • 云天明的DX3906
    2017-12-24 02:08:56

    谢谢老哥，终于可以让我睡觉了2017/12/24 上午2:04:07

    //新建一个postcss.config.js，里面写入

    module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: ['last 5 versions']
        })
    ]
}


    //回到webpack.config.js

    rules:[
  {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            },
            {
                test:/\.scss$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            }
]


    0
  • 高人一等193
    2017-08-11 14:22:27

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

请无视上面的，这样来就可以了 样式用@import引别的样式表进来的也能解析了


    1
  • 高人一等193
    2017-08-11 13:44:16

    module:{
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
exclude:path.resolve(__dirname,'node_modules'),
include:path.resolve(__dirname,'src'),
query: {
   "presets":["latest"]
}
},
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'},
{
loader:'postcss-loader',
options:{
plugins:function(){
return [
require('autoprefixer')
]
}
}
}
]
}
]
},

    这样整就可以了，视频里面的版本太低，那样走会报错

    1
  • 小小辣条
    2017-07-07 16:01:48

    遇到同样的问题，


    0
  • TCircley
    2017-06-08 17:52:34

    我也同样遇到这种问题...只要是在css中使用了@import，无论是在哪里配置postcss-loader都报错

    后来使用postcss.config.js进行配置就OK，我也不懂为什么

    在项目根目录下创建一个postcss.config.js文件，配置如下

    module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: ['last 5 versions']
        })
    ]
}


    4
  • 心有猛虎_细嗅蔷薇
    2017-05-23 08:49:30


    npm install css-loader style-loader --save-dev
require('style.loader!css-loader!./[name].css')


    0