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

vue cli

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

vue.config.js

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

vite

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

vite.config.js

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