1. 需求分析

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

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

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

朋友們不妨先停下來思考一下，再往下看實(shí)現(xiàn)步驟。當(dāng)然，我們這里聊的是，VueCLI3+腳手架創(chuàng)建的項(xiàng)目。

2. 實(shí)現(xiàn)步驟

（1）全局使用scss變量

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

配置vue.config.js文件：

讓我們逐步解釋一下這個(gè)配置選項(xiàng)，

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

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

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

（2）全局使用less變量

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

安裝Webpack插件style-resources-loader：

安裝時(shí)，我們要選擇less預(yù)處理器對(duì)應(yīng)的版本。

vue add style-resources-loader

配置vue.config.js文件：

這里我們使用的是，Node.js中的路徑解析表達(dá)式，用于獲取指定全局樣式文件的絕對(duì)路徑。但要注意的是，此處不能使用別名路徑，會(huì)報(bào)錯(cuò)。

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

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

3. 問題詳解

（1）關(guān)于VueCLI的總結(jié)

Vue CLI 是一個(gè)基于 webpack 的官方腳手架工具，用于快速搭建 Vue.js 項(xiàng)目。它提供了一套預(yù)定義的項(xiàng)目結(jié)構(gòu)、開發(fā)服務(wù)器、構(gòu)建配置和插件系統(tǒng)，使得創(chuàng)建和管理 Vue.js 項(xiàng)目變得更加簡單和高效。

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

Vue CLI 通過封裝和預(yù)配置 webpack，簡化了使用 webpack 進(jìn)行 Vue.js 項(xiàng)目開發(fā)的流程。它隱藏了復(fù)雜的 webpack 配置細(xì)節(jié)，提供了一組約定和默認(rèn)配置，使得開發(fā)者能夠?qū)Ｗ⒂诰帉?Vue 組件和業(yè)務(wù)邏輯，而無需手動(dòng)配置和管理 webpack。

Vue CLI 集成了 webpack，并提供了一系列的插件和配置選項(xiàng)，可以根據(jù)項(xiàng)目需求進(jìn)行自定義配置。你可以通過 Vue CLI 的配置文件（vue.config.js）來修改 webpack 相關(guān)配置，例如添加自定義的 loaders、plugins、調(diào)整構(gòu)建輸出等。

總結(jié)來說，Vue CLI 是基于 webpack 的構(gòu)建工具，它簡化了 Vue.js 項(xiàng)目的搭建和開發(fā)流程，并提供了對(duì) webpack 配置的擴(kuò)展和定制能力，使開發(fā)者能夠更加專注于 Vue.js 應(yīng)用的開發(fā)。

（2）關(guān)于Webpack的總結(jié)

Webpack 是一個(gè)現(xiàn)代化的靜態(tài)模塊打包工具。它主要用于將前端項(xiàng)目中的各種資源（如 JavaScript、CSS、圖片等）視為模塊，并根據(jù)模塊之間的依賴關(guān)系進(jìn)行靜態(tài)分析，最終將它們打包成適用于瀏覽器環(huán)境的靜態(tài)資源。

Webpack 的主要功能包括：

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

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

總結(jié)來說，Webpack 是一個(gè)強(qiáng)大的靜態(tài)模塊打包工具，通過模塊化和依賴管理，能夠?qū)⑶岸隧?xiàng)目中的各種資源打包成優(yōu)化的靜態(tài)文件，同時(shí)提供了豐富的擴(kuò)展和定制能力，適用于構(gòu)建現(xiàn)代化的 Web 應(yīng)用程序。

（3）關(guān)于less和sass的區(qū)別簡述

Less 和 Sass 都是流行的 CSS 預(yù)處理器，它們?cè)诠δ芎驼Z法上有一些區(qū)別。下面是它們之間的一些主要區(qū)別：

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