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