vue cli3 安裝sass失敗總結

總之一句話，必須版本鎖定，不然安裝一次折騰一次，我也是折騰兩次了，打算記錄下來以后直接使用

1.安裝好腳手架后執行以下命令，最后一個不需要版本鎖定

npm install sass-loader@7.3.1 --save-dev   //安裝sass-loader
npm install node-sass@4.14.1                    //安裝node-loader
npm install style-loader --save-dev         //安裝style-loader
                    

2.如果已經安裝了。需要卸載從新安裝

npm uninstall sass-loader   //卸載當前的sass-loader版本
npm uninstall node-sass   //卸載當前的Node Sass版本

3.在腳手架vue.config.js進行配置，這里注意sass配置改變了

css: {    
    // 是否分離css（插件ExtractTextPlugin）
    extract: true,    
    // 是否開啟 CSS source maps
    sourceMap: false,   
    // css預設器配置項
    loaderOptions: {
        sass: {
            prependData: `@import "@/assets/css/base.scss";`
        }
      },   
    // 是否啟用 CSS modules for all css / pre-processor files.
    modules: false
  }, 

以前的sass配置：

sass: {
        data: `
          @import "~@/assets/name.scss";
        `
      },

現在新的配置：

sass: {
            prependData: `@import "@/assets/css/base.scss";`
        }

4.親測有效！！！！！！！