vue3 scss 使用js中的变量

在Vue3中，使用SCSS（Sass语言）时，若想在JavaScript中定义并使用变量，可以借助于`sass-resources-loader`插件。这个插件允许你在JavaScript文件中创建一个`scss`文件，并在其中声明变量。以下是基本步骤：

1. 安装插件：首先，在项目中安装`@vue/cli-plugin-sass`以及`sass-resources-loader`：

   npm install @vue/cli-plugin-sass sass-resources-loader --save-dev

2. 配置：在`.vuepress.config.js`（如果是在VuePress项目中）或`.vue/compiler-sfc`配置文件中添加`sass-resources-loader`配置：

   module.exports = {
     chainWebpack: config => {
       config.module
         .rule('scss-resources')
         .use('sass-resources-loader')
         .loader('sass-resources-loader')
         .options({
           resources: 'src/assets/scss/_variables.scss', // 这里是你的变量文件路径
         });
     },
   };

3. 在`_variables.scss`中定义变量：

   $primary-color: #007bff;

4. 在需要使用这些变量的地方引用它们：

   .my-component {
     color: $primary-color; // 在组件的样式中直接使用变量
   }

5. 使用`<style lang="scss">`标签引入SCSS文件到组件中，变量即可生效。