如果配置呢？

這裡用到了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自動幫我們打進去。