在vue-cli 3中给stylus、sass样式传入共享的全局变量

在Vue CLI 3中，可以使用全局变量来传递共享的样式信息给Stylus和Sass。下面是详细的攻略：

1. 配置全局变量

首先，在项目的根目录下找到vue.config.js文件（如果没有则需要手动创建），然后添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import \"@/styles/variables.scss\";`
      },
      stylus: {
        import: [path.resolve(__dirname, './src/styles/variables.styl')]
      }
    }
  }
}

在上述代码中，我们通过loaderOptions来配置Sass和Stylus的全局变量。在Sass中，我们使用prependData选项来导入variables.scss文件。在Stylus中，我们使用import选项来导入variables.styl文件。

2. 创建全局变量文件

接下来，我们需要创建全局变量文件。在项目的src/styles目录下，创建variables.scss和variables.styl文件，并在其中定义全局变量。

示例1：使用Sass

在variables.scss文件中，我们可以定义全局变量，例如：

$primary-color: #ff0000;
$secondary-color: #00ff00;

示例2：使用Stylus

在variables.styl文件中，我们可以定义全局变量，例如：

primary-color = #ff0000
secondary-color = #00ff00

3. 使用全局变量

现在，我们可以在项目的任何地方使用这些全局变量了。

示例1：使用Sass

在Sass文件中，可以直接使用全局变量，例如：

.my-element {
  color: $primary-color;
  background-color: $secondary-color;
}

示例2：使用Stylus

在Stylus文件中，可以直接使用全局变量，例如：

.my-element
  color: primary-color
  background-color: secondary-color

这样，我们就成功地在Vue CLI 3中给Stylus和Sass样式传入了共享的全局变量。

希望这个攻略对你有帮助！