在Vue 3 + Vite项目中引入并使用SCSS，首先需要确保你的项目支持SCSS。Vite通过插件自动处理这部分。
- 安装依赖：
npm install -D sass- 在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>- 创建并使用全局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>标签中，可以直接使用这些全局变量。