vue3+vite中引入sass,使用sass变量

1.安装依赖

pnpm install -D sass 

vite内置对sass语法的解析，暂时不需要安装sass-loader.

2.变量使用

我们可以单独新建一个存放变量的sass文件。例如variable.scss.

$theme-color: green;
.test {
  background-color: pink;
}

2.1.全局使用

在vite中，我们可以在vite.config.ts文件的css选项中配置。

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd())
  return {
    css: {
      // CSS 预处理器
      preprocessorOptions: {
        // 定义全局 SCSS 变量
        scss: {
          javascriptEnabled: true,
          additionalData: `@import "@/styles/variables.scss";`,
        }
      }
    }
  }
})

然后我们就可以在其他文件中直接使用变量。并且variable.scss中书写的样式可以全局使用并且生效的。

<style lang="scss" scoped>
div{
  background-color: $theme-color;
}
</style>

2.2.单独引入使用

如果我们不使用vite配置文件这种方式，可以单独引入然后使用变量。

<style lang="scss" scoped>
@import '@/styles/variables.scss';
div{
  background-color: $theme-color;
}
</style>

我试过了直接main.ts中引入变量文件，变量无法使用。

2.3.在js中获取变量

新建variables.module.scss文件，使用:export{}语法用来导出变量。(通过搜索知道:export{}属于css module语法，但具体文档描述我暂时没找到)。如果我们在vite.config.ts中已经全局配置引入了variables.scss文件，在variables.module.scss文件中直接使用$theme-color赋值即可。若没有，需要在variables.module.scss文件的顶部先引入变量文件@import '@/styles/variables.scss'; 。

:export {
  themeColor: $theme-color;
}

然后我们在vue文件中使用。

<script setup lang="ts">
  import { RouterLink, RouterView } from 'vue-router'
  import HelloWorld from './components/HelloWorld.vue'
  import variables from '@/styles/variables.module.scss'
  console.log(variables.themeColor)//green
</script>
<template>
  <span :style="`color:${variables.themeColor}`">我是绿色的字</span>
</template>

然后就可以正常使用了。

2.4.其他

如果运行警告：

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api

可以在vite中添加配置项api: 'modern-compiler'。指定使用 sass API。

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd())
  return {
    css: {
      // CSS 预处理器
      preprocessorOptions: {
        // 定义全局 SCSS 变量
        scss: {
          javascriptEnabled: true,
          additionalData: `@import "@/styles/variables.scss";`,
          api: 'modern-compiler'
        }
      }
    }
  }
})

另外的解决方法参考：https://cn.vitejs.dev/config/shared-options.html#css-preprocessoroptions

更多学习参考：
https://blog.csdn.net/u013737132/article/details/130191394
https://blog.csdn.net/m0_61486963/article/details/127494962