背景
在编写样式时，为了提高样式的复用性和可维护性，通常我们会把常用的常量、颜色、字体等信息封装到一个单独的公共样式变量文件中，然后全局引入到项目中。进而在任何组件中不需要再单独引用，直接使用变量即可。
通过定义全局变量可以减少我们项目中的重复代码，并且在需要修改某个常量或样式时，只需修改全局变量的值，而不需要逐个修改每个使用该值的地方。
那么就有了今天我们要讨论的问题，当我们使用less或sass预处理器定义样式变量时，该如何在全局中使用其变量呢？
如何在項目中引入针对全局的less或sass文件
第一步：创建全局样式文件
首先，你需要创建一个全局样式文件，用于包含项目中的全局样式规则。
第二步：定义全局样式
在全局样式文件中，你可以定义一些适用于整个项目的样式规则，比如重置样式、基本样式设置等。
第二步：配置项目中的引入配置文件
- vue-cli2
在项目根目录/build/utils.js
function lessResourceLoader() {
// 定义加载器数组
var loaders = [
cssLoader, // 加载 CSS 文件的加载器
'less-loader', // 加载 Less 文件的加载器
{
loader: 'sass-resources-loader', // 使用 sass-resources-loader 加载器
options: {
resources: [ // 资源文件路径数组
// 导入公共 Less 文件路径
path.resolve(__dirname, '../src/assets/css/common.less'),//注意这里的路径要改成你自己的全局样式文件的相对路径
]
}
}
];
// 如果设置了提取选项
if (options.extract) {
// 返回使用 ExtractTextPlugin 插件提取样式文件的配置
return ExtractTextPlugin.extract({
use: loaders, // 使用加载器数组
fallback: 'vue-style-loader' // 使用 vue-style-loader 作为回退加载器
})
} else {
// 返回加载器数组，以 vue-style-loader 作为首个加载器
return ['vue-style-loader'].concat(loaders)
}
}
// 返回不同类型样式文件的加载器配置对象
return {
// CSS 文件加载器配置
css: generateLoaders(),
// PostCSS 加载器配置
postcss: generateLoaders(),
// Less 文件加载器配置
less: lessResourceLoader(), // 调用 lessResourceLoader 函数获取 Less 文件加载器配置
// Sass 文件加载器配置
sass: generateLoaders('sass', { indentedSyntax: true }), // 使用缩进语法
// SCSS 文件加载器配置
scss: generateLoaders('sass'),
// Stylus 文件加载器配置
stylus: generateLoaders('stylus'),
// Styl 文件加载器配置
styl: generateLoaders('stylus')
}
- vue-cli3
- 安装
Webpack插件style-resources-loader：
安装时，我们要选择less预处理器对应的版本。
vue add style-resources-loader
- 配置
vue.config.js文件：
这里我们使用的是 Node.js 中的路径解析表达式，目的是获取特定全局样式文件的绝对路径。但是要注意的是，这里不可使用别名路径，否则会导致错误。
const { defineConfig } = require('@vue/cli-service') // 引入 defineConfig 方法
const path = require('node:path') // 引入 Node.js 中的 path 模块
module.exports = defineConfig({
// 全局配置使用less变量
pluginOptions: {
'style-resources-loader': { // 使用 style-resources-loader 插件配置全局样式资源
preProcessor: 'less', // 预处理器为 Less
patterns: [ // 匹配的资源文件路径数组
path.resolve(__dirname, "./src/assets/css/lessGlobalVars.less") // Less 全局变量文件路径
]
}
}
})
- vite
vite.config.js文件中
return{
css: {
preprocessorOptions: {
less: {
additionalData: `@import "${path.resolve(__dirname, `src/assets/styles/globalVar.less`)}";` // 引入全局变量文件路径
}
}
},
}
原文链接：https://juejin.cn/post/7356072512445497370 作者：zayyo
