我要评论webpack解决css兼容性示例
npm install --save-dev postcss-loader autoprefixer
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
},
// mode: 'production', // 或者 'production'
module: {
rules: [{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}]
},
}创建postcss.config.js文件
postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {
browsers: [
'> 1%',
'last 2 versions',
'not ie <= 8'
]
}
}
}src/index.js
import './module.css'
src/module.css
body {
display: flex;
}在打包的js文件中搜索webkit 或在浏览器打包审查元素， 可以看到前缀是有生效的
到此这篇关于webpack解决css兼容性示例：的文章就介绍到这了,更多相关webpack解决css兼容性内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论