Webpack使用less以及postcss-loader

实际开发中我们写的CSS样式可能要适配不同的浏览器

在进行开发可以使用 poster-loader 帮助我们解决这个问题

首先要安装

npm i -D poster-loader autoprefixer

在 webpack.config.js 中配置

配置

poster-loader 一定要写在 css-loader 之前在 less-loader 之后.

在项目根目录新建文件 postcss.config.js

postcss.config.js

在 webpack.config.js 引入 autoprefixer 插件

image.png image.png

接下来就可以正常使用了.

编译后

或者不用新建postcss.config.js,直接在使用postcss-loader时写好配置

{
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: ['last 5 versions']
                                })
                            ]
                        }
                    }, 
                       loader: 'less-loader',]
                })
            }