如何在 js 中使用 scss 定义的变量，然后重新修改scss里面的值

在JavaScript中使用SCSS变量通常需要借助Node.js环境以及一些工具如`node-sass`、`sass-loader`和`webpack`等。以下是基本步骤：

1. 首先，在项目中安装必要的依赖：

   npm install node-sass sass-loader webpack webpack-cli --save-dev

2. 创建或更新`.scss`文件，定义变量：

   $primary-color: #007BFF; // 示例颜色

   // 将这个变量导入到其他可以使用的scss文件中
   @use "sass:vars"; // 或者 @use 'your-project/styles/var';

   .example-class {
     color: $primary-color;
   }

3. 使用`sass-loader`将`.scss`文件编译成CSS：
在`webpack.config.js`中配置loader:

   module.exports = {
     // ... 其他配置
     module: {
       rules: [
         {
           test: /\.scss$/,
           use: [
             'style-loader',
             'css-loader',
             'sass-loader', // 这里加载SCSS文件并处理变量
           ],
         },
       ],
     },
   };

4. 现在你可以在JavaScript中访问并改变SCSS变量的值了，但这通常是间接的。通过使用`postcss-vars`库（或者其他类似方案），你可以创建一个API来读取和设置变量：

   const variables = require('./variables.json'); // 生成的json文件，保存变量及其默认值
   const setVariableValue = (variableName, value) => {
     variables[variableName] = value; // 更新变量
     // 你需要再运行一次SASS编译，才能看到更改，例如：
     const newStyles = require('!!sass-resources-loader!./styles/main.scss')({ variables });
     document.head.appendChild(newStyles);
   };

   setVariableValue('$primary-color', '#ff0000'); // 修改颜色

5. 当然，这种方法有个缺点，每次修改变量后都需要重新编译，如果你有实时刷新的需求，可以考虑使用`watchpack`。