本文字數：349 預計閱讀時間：1.5分鐘
問題：Vue中使用 scss 配置全域變數時 報錯 ~
版本資訊：
Vue 2.6.11 Cli 4.5.00
sass-loader 10.0.2
node-sass 4.14.1
Sass、Less是強化 CSS 的輔助工具，它并不是一門語言，但能有效提高開發效率，最直白的感受是大幅度減少了各種尋找Class，它在 CSS 語法的基礎上增加了變數 (variables)、嵌套 (nested rules)、混合 (mixins)、匯入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優雅，
本次記錄在Vue中引入sass以及如何解決配置全域變數時報錯的問題；
1、安裝sass-loader：
npm install -D sass-loader sass然后你就可以匯入相應的檔案型別，或在 所有的.vue 檔案中這樣來使用：(注意style標簽必須設定lang屬性為scss)
<style lang="scss">
//@import '全域變數scss'
$color: red;
</style>2、配置全域變數：
如果在每一個.vue檔案都引入import scss檔案，還是比較麻煩的，所以直接全域搞定，無需任何地方引入 步驟如下：
安裝node-sass：
npm install node-sass --save-dev配置全域變數scss檔案：
//src > styles > variables.scss
$blue: #324157;
$red: #c03639;
$pink: #e65d6e;專案根目錄vue.config.js內配置sass路徑：
//project (root) > vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `@import "./src/styles/variables";` //注意
}
}
}
};PS：
由于sass-loader版本不同，loaderOptions 中 additionalData的鍵名也不同，基本各大技術論壇90%的scss配置全域變數的文章都未提及V10的鍵名，這也是導致我踩坑一早上的罪魁禍首...em.....
sass-loader v8-，這個選項名是 "data"
sass-loader v8 中，這個選項名是 "prependData"
sass-loader v10+，這個選項名是 "additionalData"
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/166044.html
標籤：python
下一篇：基于HTML的飛機射擊游戲