Vue项目自动注入less、sass、scss、stylus全局变量

一、Vue2项目

// vue.config.js
const path = require('path')
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设有 `src/assets/style/var.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/assets/style/var.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "~@/assets/style/var.scss";`
      },
      // 
      less:{
        additionalData: `@import "~@/assets/style/var.less";`
      },
      stylus: {
        import: path.join(__dirname, './src/assets/style/var.styl')
      }
    }
  }
}

官方文档：CSS 相关 | Vue CLI

二、Vue3项目

// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import path from 'path'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "@/assets/style/var.less";`,
      },
      sass: {
        additionalData: `@import "@/assets/style/var.sass"`,
      },
      scss: {
        additionalData: `@import "@/assets/style/var.scss";`,
      },
      stylus: {
        imports: [path.resolve(__dirname, './src/assets/style/var.styl')]
      }
    },
  }
})

2024-4-9