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同理

相关推荐
記億揺晃着的那天7 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
真的想不出名儿8 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
Queen_sy8 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
技术钱10 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
Flash Dog10 小时前
【Vue】——路由
vue.js
羊羊小栈11 小时前
基于「多模态大模型 + BGE向量检索增强RAG」的航空维修智能问答系统(vue+flask+AI算法)
vue.js·人工智能·python·语言模型·flask·毕业设计
喝拿铁写前端12 小时前
Vue 组件通信的两种世界观:`.sync` 与普通 `props` 到底有什么不同?
前端·vue.js·前端框架
用户221520442780012 小时前
vue3组件间的通讯方式
前端·vue.js
tyro曹仓舒12 小时前
Vue单文件组件到底需不需要写name
前端·vue.js
閞杺哋笨小孩13 小时前
Vue3 点击指令(防抖 / 节流)
前端·vue.js