記一次VueCLi生成項(xiàng)目中引入全局Scss文件的踩坑記錄

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

  • VueCli生成項(xiàng)目集成插件版本
  "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">測(cè)試</div>
  </div>
<template>
 ...
 <style lang="scss">
.test {
  color: $color-danger;
}
</style>

但是,報(bào)錯(cuò)了!!!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, 又報(bào)新的錯(cuò)了!


scss3.png

WTF!!!??????

咦~~~~報(bào)錯(cuò)提示配置不對(duì) ?

不會(huì)呀,文檔不寫著嗎?可是就是報(bào)錯(cuò)了!!! ??

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

最愛這個(gè)清爽的界面了!唉???????

but一臉懵逼~~~??

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

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

scss6.png

但是sass版本問題,還是要改到固定版本的喲!!!

逃了~~~~????

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容