Vue2如何全局使用sass和less变量

一、全局使用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")
      ]
    }
  }
})

 组件中直接使用变量：