• 有一段時間沒有寫筆記了，今天記錄一下
• 本用的是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的。 如何安裝及使用可以點選

配置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自動幫我們打進去。