我们经常因为某些变量不能全局引入而头疼如麻，尤其是在做一些统一样式的时候，简直是噩梦，而且网上乱七八糟的文章很多很多，但是真正教你配置的没几个，因为很多都是复制过来的，有些人为了赶时间随便复制一下，这里将为你提供史上最详细的引入流程
第一步：创建项目
第二步：在src文件夹下面创建styles文件夹
第三步：创建variables.scss文件作为你使用的全局scss变量
$namespace: v;
$elNamespace: el;
第四步：如果需要跟js/ts交互的话创建global.module.scss，如无需要请忽略
注意：此时命名规则必须为xxx.module.scss，否则在js获取时是一串字符文章来源：https://www.toymoban.com/news/detail-598212.html
@import './variables.scss'
:export {
namespace: $namespace,
elNamespace: $elNamespace
}在js/ts中引入文章来源地址https://www.toymoban.com/news/detail-598212.html
import variables from '@/styles/global.module.scss'
console.log(variables)
// 打印的结果
// {
// namespace: 'v',
// elNamespace: 'el'
// }第五步：在vite.config.ts/vite.config.js中引入
{
// code
css: {
preprocessorOptions: {
// 全局样式引入
scss: {
additionalData: '@import "./src/styles/variables.scss";',
javascriptEnabled: true
}
}
}
// code
}到了这里，关于史上最详细的vite引入scss全局变量详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
