用了 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

将

"css-loader",
"postcss-loader",

改为：

{loader: 'css-loader',options: { importLoaders: 1 }},
{loader: 'postcss-loader',options: { config: { path: path.resolve(__dirname, './postcss.config.js') } },

我是在这里找到的答案：
https://github.com/webpack-co...

Answer 3

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

use: [
  'style-loader',
   MiniCssExtractPlugin.loader,
  'css-loader',
  'postcss-loader'
]

Answer 4

希望楼主的问题早已解决。
postcss.config.js 在根目录下建就可以了.第二种方法也可以在webpack.config.js中把loader改成对象形式,在options选项里加入plugins: [require('autoprefixer')]就可以,配置浏览器范围前缀加的会全一些.