在前端開發(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
也拋出警告!
好吧,那怎么辦?只能翻VueCli
官方文檔了~~~
good! 文檔有介紹耶!?
so, 配置一下咯!
在vue.config.js
文件中增加如下配置:
css: {
loaderOptions: {
scss: {
additionalData: `
@import "@/assets/styles/variable.scss";
@import "@/assets/styles/mixin.scss";
`
}
}
}
這下應(yīng)該可以了吧!!!'
But, 又報(bào)新的錯(cuò)了!
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)迫癥!不能忍啊!!!??
繼續(xù)Google......
咦,有人說是sass
版本問題!改到固定版本!
"sass": "1.26.5",
丟! 真的可以了!廣發(fā)????
最愛這個(gè)清爽的界面了!唉???????
but一臉懵逼~~~??
=============================================分割線==============================================
后續(xù)來了~~~~
多讀了即便官方文檔,發(fā)現(xiàn)是自己看漏了,文檔有寫sass-loader
v8
中,這個(gè)選項(xiàng)名是 prependData
,是我自己看漏了!
但是sass
版本問題,還是要改到固定版本的喲!!!
逃了~~~~????