Vue2如何全局使用sass和less变量_vue2项目中怎么sass做的变量怎么全局使用-优快云博客

本文链接：https://blog.youkuaiyun.com/dhp1994/article/details/135036706

本文介绍了如何在Vue项目中全局使用Sass和Less变量，包括创建公共变量文件、配置Vue.config.js以导入这些变量，以及在组件中直接引用变量的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、全局使用sass变量

新建公共sass变量文件，在其中定义所需要的全局变量，用$定义。

配置vue.config.js文件：

additionalData 是一个特定于预处理器的配置选项，用于向预处理器传递额外的数据。
数据值这里使用sass的 @import 指令来引入全局变量文件。

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  // 全局配置使用scss变量
  css: {
    loaderOptions: {
      // 单独配置scss或sass，配置scss语句结尾必须要有分号，配置sass语句结尾必须没有分号
      scss: {
        additionalData: `@import "@/assets/css/sassGlobalVars.scss";`
      },
      // sass: {
      //   additionalData: `@import "@/assets/css/sassGlobalVars.sass";`
      // },
    },
  },
})

组件中直接使用变量：

二、全局使用less变量

新建公共less变量文件，在其中定义所需要的全局变量，用@定义。

安装Webpack插件style-resources-loader：

安装时，我们要选择less预处理器对应的版本。

npm i -D style-resources-loader

配置vue.config.js文件：

注意：此处不能使用别名路径，会报错。

const { defineConfig } = require('@vue/cli-service')
const path = require('node:path')

module.exports = defineConfig({
  // 全局配置使用less变量
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
          // 这个是加上自己的路径，注意此处不能使用别名路径
          path.resolve(__dirname, "./src/assets/css/lessGlobalVars.less")
      ]
    }
  }
})

组件中直接使用变量：