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

相关推荐
ElasticPDF-新国产PDF编辑器18 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin19 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌20 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光20 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs20 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石20 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking1 天前
解决 axios get请求瞎转义问题
vue.js
向阳2561 天前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特1 天前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~1 天前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习