Vue-Cli 3.x 創建的項目中對 import 引入的 CSS 樣式啟用 autoprefixer

問題描述：

Vue-Cli 3.x 默認開啟了 autoprefixer，但對於在 main.js 中通過 import 引入的 CSS 並沒有自動添加前綴

 

分析原因：

autoprefixer 在項目編譯的時候，會根據 loader 的規則編譯相應的 CSS。Vue-Cli 創建的項目，默認只處理了 .vue 文件中的 CSS，對於直接 import 引入的樣式，需要另外配置 loader 規則。

 

解決方案：

在 vue.config.js 中添加 CSS 規則：

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 這里的選項會傳遞給 css-loader
        importLoaders: 1,
      },
      less: {
        // 這里的選項會傳遞給 postcss-loader
        importLoaders: 1,
      }
    }
  }
};

importLoaders 代表的是針對 import 引入的文件，在 css-loader 前需要進行什么處理，1 代表使用 postcss 進行處理