vue3 css全局变量

在Vue3中，可以使用CSS变量来定义全局变量。具体步骤如下：

1. 在根组件中定义全局CSS变量，例如：

:root {
  --primary-color: #42b983;
}

2. 在组件中使用全局CSS变量，例如：

button {
  background-color: var(--primary-color);
}

这样，所有使用了该组件的地方都会应用该全局CSS变量。

另外，如果你想在Vue3中使用Sass或Scss来定义全局变量，可以使用sass-resources-loader来实现。具体步骤如下：

1. 安装sass和sass-resources-loader：

npm install sass sass-loader sass-resources-loader --save-dev

2. 在vue.config.js中配置sass-resources-loader：

module.exports = {
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          resources: ['./path/to/your/scss/variables.scss']
        })
        .end()
    })
  }
}

这样，你就可以在所有组件中使用定义在variables.scss中的全局变量了。