autoprefixer没有生效

Question

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动生成html文件，并自动引入打包后的js
const {CleanWebpackPlugin} = require('clean-webpack-plugin') // 打包前先删除dist目录

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',

    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.(css|scss)$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'postcss-loader',
        'sass-loader'
      ]
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '处理 CSS/SCSS',
      filename: 'index.html',
      template: 'index.html'
    }),
    new CleanWebpackPlugin()
  ]
}

这是配置文件和postcss.config.js文件，但是打包后的html并没有添加浏览器前缀，postcss-loader也在sass-loader前面呢，不知道咋回事了

Answer 1

慕尼黑9181632 2019-08-27 01:44:08

postcss-loader要读取Browserslist的,官网写的很清楚

去配置下 browsersList

Answer 2

Dell 2019-08-20 23:43:33

postcss-loader 放在css-loader上面试试

• 提问者 低级前端开花工程师 #1

  不行，打包直接会报错

• Dell 回复 提问者 低级前端开花工程师 #2

  那我知道了，你去配置下打包的环境，environment，默认打包可能就不支持低版本浏览器，你把environment设置低一点，就好了