寫在前面
近期把之前寫的一個(gè)Vue老項(xiàng)目進(jìn)行了一番重構(gòu)，發(fā)現(xiàn)其中有許多重復(fù)使用的css樣式代碼鲫骗，決定把重復(fù)使用的樣式代碼提取到公共的scss文件中，并全局使用，本來以為是一個(gè)比較簡(jiǎn)單的工作坊萝，但是在操作的過程中，還是碰到了不少問題许起。這里簡(jiǎn)單記錄下十偶，并分享給有需要的人，希望對(duì)大家有所幫助园细。
方法 1
- 步驟 1：根目錄新建
vue.config.js文件 - 步驟 2：將下述代碼添加到
vue.config.js文件中
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "./public/my-global.scss";`,
},
},
},
};
也可以直接在 APP.vue 中通過 下方代碼引入惦积，但是這時(shí)只能訪問定義好的樣式，不能訪問 scss 中定義的變量猛频，通過上述方法引入才能做到真正的代碼引入狮崩。
@import "../public/my-global.scss";
引入 css 文件需要通過 @import url ( path ) 的方式引入， 引入 scss 文件則不需要 url ( ) .
方法 2
下面這段代碼是一段過時(shí)的代碼鹿寻，如果方法 1 不生效的話睦柴，可以試試如下代碼：
css: {
loaderOptions: {
scss: {
additionalData: `@import "./public/my-global.scss";`
}
}
}
本文同步發(fā)布于個(gè)人 G 眾號(hào)：【前端知識(shí)營(yíng)地】點(diǎn)擊下方鏈接關(guān)注我，獲取更多優(yōu)質(zhì)有趣的內(nèi)容毡熏！
?? 點(diǎn)擊關(guān)注前端知識(shí)營(yíng)地
?? 閱讀原文
