史上最详细的vite引入scss全局变量详解

我们经常因为某些变量不能全局引入而头疼如麻，尤其是在做一些统一样式的时候，简直是噩梦，而且网上乱七八糟的文章很多很多，但是真正教你配置的没几个，因为很多都是复制过来的，有些人为了赶时间随便复制一下，这里将为你提供史上最详细的引入流程

第一步：创建项目

第二步：在src文件夹下面创建styles文件夹

第三步：创建variables.scss文件作为你使用的全局scss变量

$namespace: v;
$elNamespace: el;

第四步：如果需要跟js/ts交互的话创建global.module.scss，如无需要请忽略

注意：此时命名规则必须为xxx.module.scss，否则在js获取时是一串字符

@import './variables.scss'

:export {
    namespace: $namespace,
    elNamespace: $elNamespace
}

在js/ts中引入

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
}