在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

在Vue CLI 3.0中，你可以使用预处理器（如Sass、Less或Stylus）来配置全局变量，以便在整个项目中共享这些变量。下面是详细的攻略：

步骤1：安装预处理器

首先，你需要确保已经安装了所需的预处理器。你可以使用以下命令来安装它们：

• Sass：npm install sass-loader node-sass --save-dev
• Less：npm install less less-loader --save-dev
• Stylus：npm install stylus stylus-loader --save-dev

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

接下来，你需要创建一个全局变量文件，用于存储你的变量。你可以选择在项目的根目录下创建一个名为variables.scss（对于Sass）或variables.less（对于Less）或variables.styl（对于Stylus）的文件。

在这个文件中，你可以定义你的全局变量。例如，对于Sass，你可以这样定义一个变量：

$primary-color: #ff0000;

步骤3：配置预处理器

在Vue CLI 3.0中，你可以使用vue.config.js文件来配置预处理器。如果你的项目中没有这个文件，你可以在项目的根目录下创建一个。

在vue.config.js文件中，你需要添加以下代码来配置预处理器：

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

在这个配置中，你需要根据你使用的预处理器进行相应的设置。对于Sass，你需要使用prependData选项来导入全局变量文件。对于Less，你可以使用globalVars选项来定义全局变量。对于Stylus，你可以使用import选项来导入全局变量文件。

示例说明

示例1：在Sass中使用全局变量

假设你在variables.scss文件中定义了一个名为$primary-color的变量。你可以在任何组件的样式中使用这个变量，如下所示：

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

示例2：在Less中使用全局变量

假设你在variables.less文件中定义了一个名为@primary-color的变量。你可以在任何组件的样式中使用这个变量，如下所示：

<style lang=\"less\">
  .my-component {
    color: @primary-color;
  }
</style>

这样，你就可以在Vue CLI 3.0中使用预处理器配置全局变量了。无论你选择使用Sass、Less还是Stylus，都可以按照上述步骤进行设置，并在整个项目中共享这些全局变量。