在前端開發(fā)項目中，sass是一個很好的編寫樣式的預(yù)處理工具，但是集成到VueCli中以后坑還是很多的。如果想要在項目入口文件main.js中引入，然后可以全局使用，會報各種各樣的錯。下面就記錄一下自己的踩坑經(jīng)歷吧。

• VueCli生成項目集成插件版本

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }

• 我們期待的使用方式：

// index.scss  定義全局變量和混入
@import './variable.scss';
@import './mixin.scss';
@import './element-variables.scss'
// main.js - 全局引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
// 全局引入
import '@/assets/styles/index.scss'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// App.vue 使用 全局變量
<template>
  <div id="app">
    <div class="test">測試</div>
  </div>
<template>
 ...
 <style lang="scss">
.test {
  color: $color-danger;
}
</style>

但是，報錯了?。?！element-ui也拋出警告！

scss1.png

好吧，那怎么辦？只能翻VueCli官方文檔了~~~

good! 文檔有介紹耶！?

scss2.png

so, 配置一下咯！

在vue.config.js文件中增加如下配置：

 css: {
    loaderOptions: {
      scss: {
        additionalData: `
          @import "@/assets/styles/variable.scss";
          @import "@/assets/styles/mixin.scss";
        `
      }
    }
  }

這下應(yīng)該可以了吧?。。?

But, 又報新的錯了！

scss3.png

WTF!!!??????

咦~~~~報錯提示配置不對 ?

不會呀，文檔不寫著嗎？可是就是報錯了?。?！ ??

Google一下吧....

好像有人遇到！把配置改成additionalData改成prependData ?

  css: {
    loaderOptions: {
      scss: {
        prependData: `
          @import "@/assets/styles/variable.scss";
          @import "@/assets/styles/mixin.scss";
        `
      }
    }
  },

我去！居然可以了！這是什么鬼？官方文檔沒更新?

but, element-ui的警告還在，強(qiáng)迫癥！不能忍?。。?！??

scss4.png

繼續(xù)Google......

咦，有人說是sass版本問題！改到固定版本！

 "sass": "1.26.5",

丟！ 真的可以了!廣發(fā)????

scss5.png

最愛這個清爽的界面了！唉???????

but一臉懵逼~~~??

=============================================分割線==============================================
后續(xù)來了~~~~

多讀了即便官方文檔，發(fā)現(xiàn)是自己看漏了，文檔有寫sass-loader v8 中，這個選項名是 prependData,是我自己看漏了！

scss6.png

但是sass版本問題，還是要改到固定版本的喲?。?！

逃了~~~~????