1. 需求分析

為了提高樣式的復用性和可維護性，我們會選擇將經常使用的常量、顏色、字體等信息，封裝到公共變量文件中，然后全局引入，進而在任何組件中不需要再單獨引用，直接使用變量即可。

通過定義全局變量，可以減少代碼中的重復。如果需要修改某個常量或樣式，只需要修改全局變量的值，而不需要逐個修改每個使用該值的地方。

那么就有了今天的問題，當我們使用less或sass預處理器定義樣式變量時，該如何在全局中使用其變量呢？

朋友們不妨先停下來思考一下，再往下看實現步驟。當然，我們這里聊的是，VueCLI3+腳手架創建的項目。

2. 實現步驟

（1）全局使用scss變量

新建公共scss變量文件，在其中定義所需要的全局變量，用$定義。

配置vue.config.js文件：

讓我們逐步解釋一下這個配置選項，

• additionalData 是一個特定于預處理器的配置選項，用于向預處理器傳遞額外的數據。
• 數據值這里使用sass的 @import 指令來引入全局變量文件。

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
// 全局配置使用scss變量
css: {
loaderOptions: {
// 單獨配置scss或sass，配置scss語句結尾必須要有分號，配置sass語句結尾必須沒有分號
scss: {
additionalData: `@import "@/assets/css/sassGlobalVars.scss";`
},
// sass: {
// additionalData: `@import "@/assets/css/sassGlobalVars.sass";`
// },
},
},
})

（2）全局使用less變量

新建公共less變量文件，在其中定義所需要的全局變量，用@定義。

安裝Webpack插件style-resources-loader：

安裝時，我們要選擇less預處理器對應的版本。

vue add style-resources-loader

配置vue.config.js文件：

這里我們使用的是，Node.js中的路徑解析表達式，用于獲取指定全局樣式文件的絕對路徑。但要注意的是，此處不能使用別名路徑，會報錯。

const { defineConfig } = require('@vue/cli-service')
const path = require('node:path')

module.exports = defineConfig({
// 全局配置使用less變量
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 這個是加上自己的路徑，注意此處不能使用別名路徑
path.resolve(__dirname, "./src/assets/css/lessGlobalVars.less")
]
}
}
})

3. 問題詳解

（1）關于VueCLI的總結

Vue CLI 是一個基于 webpack 的官方腳手架工具，用于快速搭建 Vue.js 項目。它提供了一套預定義的項目結構、開發服務器、構建配置和插件系統，使得創建和管理 Vue.js 項目變得更加簡單和高效。

目前，最新的Vue CLI版本已經到了5，并且官方已不再推薦使用。

Vue CLI 通過封裝和預配置 webpack，簡化了使用 webpack 進行 Vue.js 項目開發的流程。它隱藏了復雜的 webpack 配置細節，提供了一組約定和默認配置，使得開發者能夠專注于編寫 Vue 組件和業務邏輯，而無需手動配置和管理 webpack。

Vue CLI 集成了 webpack，并提供了一系列的插件和配置選項，可以根據項目需求進行自定義配置。你可以通過 Vue CLI 的配置文件（vue.config.js）來修改 webpack 相關配置，例如添加自定義的 loaders、plugins、調整構建輸出等。

總結來說，Vue CLI 是基于 webpack 的構建工具，它簡化了 Vue.js 項目的搭建和開發流程，并提供了對 webpack 配置的擴展和定制能力，使開發者能夠更加專注于 Vue.js 應用的開發。

（2）關于Webpack的總結

Webpack 是一個現代化的靜態模塊打包工具。它主要用于將前端項目中的各種資源（如 JavaScript、CSS、圖片等）視為模塊，并根據模塊之間的依賴關系進行靜態分析，最終將它們打包成適用于瀏覽器環境的靜態資源。

Webpack 的主要功能包括：

• 模塊打包： Webpack 可以將項目中的各種資源文件（如 JavaScript、CSS、圖片等）都視為模塊，并通過依賴關系對它們進行靜態分析和打包。
• 依賴管理： Webpack 可以通過模塊之間的依賴關系，自動解析和加載模塊所依賴的其他模塊，包括通過 import、require 等語法引入的模塊。
• 代碼轉換： Webpack 支持使用各種加載器（Loader）來對模塊的源代碼進行轉換。例如，可以使用 Babel Loader 將 ES6+ 代碼轉換為兼容性更好的 ES5 代碼，或使用 CSS Loader 處理 CSS 文件并提取樣式。
• 代碼分割： Webpack 支持將項目中的代碼分割成多個塊（chunk），并通過按需加載的方式實現優化。這可以減少初始加載時間，提高應用的性能。
• 插件系統： Webpack 提供了豐富的插件系統，可以通過插件來擴展和定制打包過程。插件可以用于優化代碼、生成 HTML 文件、處理靜態資源等各種用途。
• 開發服務器： Webpack 提供了一個開發服務器，可以在開發過程中實時監測代碼變化，并自動重新構建和刷新頁面，提高開發效率。

Webpack 的配置文件是一個JavaScript模塊，通常命名為 webpack.config.js。在配置文件中，你可以定義入口文件、輸出目錄、加載器、插件等各種配置項，以滿足項目的需求。

總結來說，Webpack 是一個強大的靜態模塊打包工具，通過模塊化和依賴管理，能夠將前端項目中的各種資源打包成優化的靜態文件，同時提供了豐富的擴展和定制能力，適用于構建現代化的 Web 應用程序。

（3）關于less和sass的區別簡述

Less 和 Sass 都是流行的 CSS 預處理器，它們在功能和語法上有一些區別。下面是它們之間的一些主要區別：

• 語法： Less 使用類似CSS 的語法，而 Sass 使用類似于 Ruby 的語法。Less 的語法更接近于原生 CSS，因此對于熟悉 CSS 的開發人員來說，上手較為容易。Sass 的語法更為靈活和強大，具有更多的編程特性，如變量名可以以 $ 開頭，支持嵌套規則等。
• 編譯方式： Less 使用 JavaScript 運行時進行編譯，而 Sass 使用 Ruby 運行時進行編譯。這意味著在使用 Less 時，只需在前端項目中引入 Less.js 即可進行實時編譯；而使用 Sass 時，需要先安裝 Ruby 環境，并通過命令行工具或構建工具進行編譯。
• 生態系統： Sass 有一個更為龐大和活躍的生態系統，擁有豐富的第三方庫和工具支持。它的社區更大，有更多的資源和文檔可供參考。Less 的生態系統也相對健全，但相對于 Sass 來說規模較小。
• 功能特性： Sass 在功能特性方面更為強大。它支持混合宏（Mixin）、嵌套規則、條件語句等高級功能，使得樣式表的編寫更加靈活和可維護。Less 的功能相對較為簡單，但仍提供了基本的變量、嵌套規則等功能。