vue 如何设置全局 sass动态变量

要在Vue项目中设置全局的Sass动态变量，你可以使用Vue CLI提供的自定义主题功能。

以下是设置全局Sass动态变量的步骤：

1. 在Vue项目中安装`sass-loader`和`node-sass`（或`dart-sass`）依赖：

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

2. 在项目根目录下创建一个`vue.config.js`文件，如果已经存在，请跳过此步骤。

3. 在`vue.config.js`文件中，添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/variables.scss";`
      }
    }
  }
};

这将引入一个名为`variables.scss`的Sass文件，它将包含全局的动态变量。

4. 在`src/assets`目录下创建一个`variables.scss`文件，并在其中定义你想要的全局动态变量，例如：

$primary-color: #ff0000;

你可以根据实际需要定义更多的变量。

5. 在Vue组件中，你可以直接使用全局的动态变量，例如：

<style lang="scss">
  .my-component {
    color: $primary-color;
  }
</style>

这样，`$primary-color`变量的值将被应用到`.my-component`样式中。

通过以上步骤，你就可以在Vue项目中设置和使用全局的Sass动态变量了。当你修改了`variables.scss`文件中的变量值时，这些变量的值将会在整个项目中得到更新。