vite配置scss全局变量

vite配置scss全局变量

创建单独文件variable.scss在其中定义变量

vite.config.ts中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/variable.scss";'
      }
    }
  }
})

任何scss地方使用变量

p {
  color: variable.$color;
}

可能遇到的问题

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0

sass在3.0.0移除了@import改为@use,因此会有这个提示，所以配置时推荐使用@use

弃用的原因在于 @import 规则存在一些问题，比如会把所有变量、混入（mixins）和函数都导入到全局作用域，容易造成命名冲突，@use 规则能更好地控制作用域，避免这类问题

他们在使用时是有区别的

@import 对应使用变量

p { color: $color}

@use 对应使用变量

p {
  color: variable.$color; // 文件名.变量名
}

Can't find stylesheet to import. 

配置时，发现路径是对的，但是一直报错，如下

在使用相对路径的时候，vite可能无法解析，因为在sass的加载器在处理相对路径时，会根据当前文件的位置查找，而additionalData是全局注入的内容，没有明确的上下文依赖关系，因此相对路径对报错

修改为@/styles/variable.scss就可以完美解决了

Module loop: this module is already being loaded.

重复引入module报错，一般情况，如果我们在main.ts已经引入过一次scss文件，在继续在vite.config.ts中引入，报错的

修改方案： 只在一个地方引入

通常scss变量的的文件都是单独建立一个文件，不会和index.scss混在一起

index.scss通常是在main.js中引入

而variable.scss通常是在vite.config.js中配置，他们的区别是什么呢

main.js与vite.config.js 引入scss的区别

main.ts全局引入，是让整个项目都加载使用了scss文件的样式，每个scss文件的yi'ji保持了自己独立的作用域，不同文件直接的变量是不能相互使用的，这也是为什么要在vite.config.js中配置

vite.config.js的additionalData引入a文件，会保证在每个scss文件编译之前执行先编译一次a文件，保证了每次scss文件注入时，a文件变量已经都存在了，这样保证了变量可以全局使用