webpack postcss-loader autoprefixer 配置

转自：https://blog.csdn.net/xiaotuni/article/details/78014852

 

如果配置呢？

这里用到了webpack、style-loader、css-loader、postcss-loader、sass-loader、autoprefixer

安装插件

npm install --save-dev webpack style-loader css-loader postcss-loader sass-loader autoprefixer 

配置webpack.config.js

module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      {
        test: /\.scss$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader', options: {
              sourceMap: true, modules: true,
              localIdentName: '[local]_[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              config: {
                path: 'postcss.config.js'  // 这个得在项目根目录创建此文件
              }
            }
          },
          {
            loader: 'sass-loader', options: { sourceMap: true }
          }
        ]
      }
    ]
  }

在项目根目录创建 postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

package.json 文件里添加支持哪些浏览器。

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

到这里基本上就可以安心写样式了，不用担心浏览器前缀有没有写了，让webpack自动帮我们打进去。