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> 
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

怎麼使用 postcss-loader

1.先安裝

yarn add postcss-loader -D

• 1

檢視 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')]
      },
    ]
}
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

3.執行預覽看效果

yarn server

• 1

執行成功後

最後瀏覽器輸入地址檢視

http://localhost:8080/home/index