vue cli3 配置 stylus全局变量的使用方式

Vue CLI3 配置 Stylus 全局变量的使用方式攻略

在 Vue CLI3 中，可以使用 Stylus 预处理器来编写样式。为了方便管理和使用全局变量，我们可以配置 Stylus，使其支持全局变量的定义和使用。下面是详细的攻略：

步骤一：安装依赖

首先，确保已经安装了 Vue CLI3。然后，在项目根目录下打开终端，执行以下命令安装 stylus 和 stylus-loader：

npm install stylus stylus-loader --save-dev

步骤二：创建全局变量文件

在项目根目录下创建一个名为 variables.styl 的文件，用于定义全局变量。在该文件中，可以定义任意的 Stylus 变量，例如：

$primary-color = #ff0000
$font-size = 14px

步骤三：配置 Vue CLI3

在项目根目录下找到 vue.config.js 文件（如果没有则创建一个），并添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: '~@/variables.styl'
      }
    }
  }
}

这段代码告诉 Vue CLI3 在编译过程中引入 variables.styl 文件。

步骤四：使用全局变量

现在，可以在项目的任何地方使用全局变量了。例如，在 Vue 组件的样式中使用全局变量：

<template>
  <div class=\"example\">
    <p :style=\"{ color: $primary-color, fontSize: $font-size }\">Hello, world!</p>
  </div>
</template>

<style lang=\"stylus\" scoped>
.example
  text-align center
</style>

在上面的示例中，我们使用了 $primary-color 和 $font-size 这两个全局变量来设置文字的颜色和字体大小。

示例说明

示例一：定义全局颜色变量

假设我们想要定义一个全局的主题颜色变量，可以在 variables.styl 文件中添加以下代码：

$primary-color = #ff0000

然后，在组件中使用该全局变量：

<template>
  <div>
    <p :style=\"{ color: $primary-color }\">This is some text.</p>
  </div>
</template>

<style lang=\"stylus\" scoped>
div
  text-align center
</style>

在上面的示例中，我们使用了 $primary-color 这个全局变量来设置文字的颜色。

示例二：定义全局字体大小变量

假设我们想要定义一个全局的字体大小变量，可以在 variables.styl 文件中添加以下代码：

$font-size = 14px

然后，在组件中使用该全局变量：

<template>
  <div>
    <p :style=\"{ fontSize: $font-size }\">This is some text.</p>
  </div>
</template>

<style lang=\"stylus\" scoped>
div
  text-align center
</style>

在上面的示例中，我们使用了 $font-size 这个全局变量来设置文字的字体大小。

以上就是配置 Vue CLI3 中使用 Stylus 全局变量的完整攻略。通过这种方式，我们可以方便地管理和使用全局变量，提高开发效率。