webpack4+：. css屬性自動追加前綴 與 mini-css-extract-plugin 插件 打包沖突問題

postcss-loader 簡單來來說就是 css3 的一些特性 在低版本瀏覽器也能運行，自動添加加前綴

如圖 就是 postcss-loader 的傑作

源碼

<style lang="stylus" scoped> .home{ width 100% height 200px background #ff9900 display flex justify-content space-between padding 20px .wb{ color #fff font-size 20px } } </style> 

怎么使用 postcss-loader

1.先安裝

yarn add postcss-loader -D

查看 package.json 文件 有沒有安裝上

2.webpack.config.js 配置

只需配置loader
**這里重點注意 postcss-loader 跟 mini-css-extract-plugin 一起使用時 一定要配置 postcss-loader 瀏覽器的兼容范圍 再配合 autoprefixer 插件一起使用 **

如果沒有配置打包會報下面的錯誤

loader 配置如下

module: { rules: [ { test: /\.(css|stylus)$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', { loader:'postcss-loader', // 跟MiniCssExtractPlugin.loader一起使用時 要添加 使用范圍 options:{ plugins:[ require('autoprefixer')({ overrideBrowserslist: ['last 5 version', '>1%', 'ios 7'] }) ] } }, 'stylus-loader' ], exclude:/node_modules/, include: [path.resolve(__dirname, 'src')] }, ] }

3.運行預覽看效果

yarn server

 

運行成功后

最后瀏覽器輸入地址查看

http://localhost:8080/home/index