Vue自动注入全局SASS/LESS全局变量

vue cli

  • webpack: 构建工具
  • less-loader: 处理样式代码

vue.config.js

js 复制代码
const { defineConfig } = require("@vue/cli-service")
module.exports = defineConfig({
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/var.scss";`, // 这里用绝对路径,分号不要漏掉了
      },
    },
  },
})

vite

  • esbuild: 应用在开发环境中
  • rollup: 应用在打包环境中

vite.config.js

javascript 复制代码
// import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
module exports defineConfig({
  plugins: [vue()],
  resolve: {
		alias: {
			'@': './src',
 		},
  },
  // resolve: {
  //   alias: {
  //     '@': fileURLToPath(new URL('./src', import.meta.url))
  //   }
  // },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/var.scss";`, // 这里用绝对路径,分号不要漏掉了
      },
    },
  },
})

组件中直接使用全局SASS的变量、混合器等样式,无需引入样式文件

LESS同理

相关推荐
一只小风华~21 分钟前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
计算机学姐1 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
武昌库里写JAVA2 小时前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
小谭鸡米花3 小时前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js
好好好明天会更好4 小时前
Vue2中页面数据响应的问题
前端·javascript·vue.js
拉不动的猪4 小时前
回顾前端项目打包时--脚本引入时机与环境类型的判断问题
前端·vue.js·面试
月弦笙音4 小时前
【Vue组件】封装组件该考虑的核心点
前端·javascript·vue.js
EF@蛐蛐堂5 小时前
Federation vs Garfish vs Micro-app 微前端选型(二)
前端·vue.js·前端框架
一枚前端小能手5 小时前
🔍 重写vue之ref和reactive
前端·javascript·vue.js
Copper peas6 小时前
axios使用过程
前端·javascript·vue.js