用了 mini-css-extract-plugin 之后postcss 不能加后缀

Question

{        test: /\.(sass|scss)$/,        use: [{            loader: MiniCssExtractPlugin.loader,            options: {              publicPath: "../"            }          },          "css-loader",          "postcss-loader",          "sass-loader"        ]      },                // postcss.config.js     module.exports = {  plugins: [    require("autoprefixer"),    // reuqire('postcss-import')  ]new MiniCssExtractPlugin({      filename: "css/[name].[hash:6].css",      // chunkFilename: "css/[name].[hash:6].css",    }),}

Answer 1

这个问题好像无关于mini-css-extract-plugin，即使你换成extract-text-plugins依然不行。

在postcss.config.js里，需要对autoprefixer进行配置，更准确说是对浏览器的兼容范围进行设置，在默认情况下会选择在一定范围的（没看到默认是多少，可能是>5%）.

解决办法：1：

module.exports = {

  plugins: [

    require('autoprefixer')({

      browsers: ['cover 99.5% in CN']

    })

  ]

}

2：官方文档里更推荐是写在package.json中或者有一个单独文件对browserlist进行配置

"browserslist": ["cover 99.5% in CN"]

这里的意思是覆盖99.5%的浏览器，地区是中国。更多请查看autoprefixer以及browserslist的Github文档

Answer 2

亲测

我也遇到了你这个问题，调整一下，既能解决你要提取文件也能给样式加浏览器前缀

use: [

  'style-loader',

   MiniCssExtractPlugin.loader,

  'css-loader',

  'postcss-loader'

]