Webpack3+postcss+sass+css自动添加前缀配置

• 有一段时间没有写笔记了，今天记录一下
• 本用的是react框架，webpack3+sass的配置
• 当前我们在写css样式的，时候总是要处理浏览器兼容问题，那就是加前缀问题，可是我们在开发的时候比如：

.className{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

这样写是不是很烦恼呀，可我就是想写下面这种.

.className{
   display: flex;
}

其实我们在真真的开发当前，一般也是以上面那种来写的，然后通过打包及插件，让我们写的样式自动加上各种浏览器下所对应的写法出来。

---

如果配置呢？

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

安装插件

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

或者用yarn进行安装

yarn add webpack style-loader css-loader postcss-loader sass-loader autoprefixer

个人还是挺喜欢用yarn的。 如何安装及使用可以点击 yarn 。

配置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自动帮我们打进去。

具体使用可以查看我的GitHub react-webpack-demo项目