Vue3 项目中在 SCSS 文件使用 JS 变量的最佳实践

在 Vue3 项目中，可以使用以下方法在 SCSS 文件中使用 JS 变量：

1. 在 Vue 组件的 style 标签中引入 SCSS 文件，例如：

<template>
  <div class='app-container'>
    <!-- ... -->
  </div>
</template>

<script>
export default {
  // ...
}
</script>

<style lang='scss'>
@import '@/assets/styles/main.scss';

.app-container {
  background-color: $primary-color;
}
</style>

2. 在 main.js 文件中定义全局的 SCSS 变量，例如：

import { createApp } from 'vue';
import App from './App.vue';
import './assets/styles/main.scss';

const app = createApp(App);

app.config.globalProperties.$primaryColor = '#007bff';

app.mount('#app');

3. 在 SCSS 文件中使用 JS 变量，例如：

$primary-color: $primaryColor;

.app-container {
  background-color: $primary-color;
}

需要注意的是，这种方式只能在 Vue 组件中使用，无法在全局的 SCSS 文件中使用。如果需要在全局的 SCSS 文件中使用 JS 变量，可以考虑使用 PostCSS 插件 postcss-advanced-variables。