【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量

在Vue 3 + Vite项目中引入并使用SCSS，首先需要确保你的项目支持SCSS。Vite通过插件自动处理这部分。

1. 安装依赖：

npm install -D sass

2. 在Vue组件中使用SCSS：

在.vue文件中，可以在<style>标签中指定lang="scss"来使用SCSS：

<template>
  <div class="example">Hello, SCSS!</div>
</template>
 
<script setup>
// JavaScript代码
</script>
 
<style lang="scss">
.example {
  color: blue;
  font-size: 16px;
  &:hover {
    color: red;
  }
}
</style>

3. 创建并使用全局SCSS变量：

首先，在项目根目录下创建一个SCSS文件（例如styles/variables.scss），定义变量：

// styles/variables.scss
$primary-color: blue;
$font-size: 16px;

然后，在vite.config.js中配置SCSS全局变量：

// vite.config.js
import { defineConfig } from 'vite';
import scssConfig from './styles/variables.scss';
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$shared-styles: ${JSON.stringify(scssConfig)};`
      }
    }
  }
});

最后，在组件的<style>中使用这些全局变量：

<template>
  <div class="global-example">Hello, Global SCSS!</div>
</template>
 
<script setup>
// JavaScript代码
</script>
 
<style lang="scss">
@import '~@/styles/variables.scss'; // 导入SCSS变量文件
 
.global-example {
  color: $primary-color;
  font-size: $font-size;
  &:hover {
    color: darken($primary-color, 10%);
  }
}
</style>

确保vite.config.js中的路径是正确的，并且additionalData选项用于将SCSS变量导入到每个<style>标签中。在组件的<style>标签中，可以直接使用这些全局变量。