记一下webpack打包, 让css自动添加浏览器前缀遇到的坑
因为网络问题,这里使用cnpm下载
1.安装
cnpm i -D postcss-loader autoprefixer
2.配置(直接在webpack.config.js中配置)
module: {
rules: [
{ test: /\.less$/, // 解析.less文件, 需要先执行cnpm i -D style-loader css-loader
use: ['style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [require('autoprefixer')] } }, 'less-loader']
}
]
}
less文件内容如下:
坑来了
运行命令打包npm run build, 浏览器中显示结果如下:
浏览器前缀没有???
解决办法:
一开始运行cnpm i -D postcss-loader autoprefixer, 没有指定autoprefixer的版本, 默认安装的是9.x的版本:
直接运行cnpm i -D autoprefixer@7.0后, 变成
之后, 再次运行npm run build, 浏览器的前缀终于出现了
