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项目