Vue 配置scss自动导入

参考

【精选】如何在vue项目中引入scss

unplugin-auto-import在vue3项目实践及报错处理 - 掘金 (juejin.cn)

环境搭建

安装scss: npm install sass node-sass sass-loader

创建变量文件:

vue 引用 scss 变量

组件页面:

配置自动导入

注意:修改后需要重启项目!!!

css 复制代码
 css:{
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/styles/var.scss" as *;
        `,
      }
    }
  }

添加后不加import也可使用全局变量

相关推荐
LCG元1 小时前
Vue.js组件开发-如何实现异步组件
前端·javascript·vue.js
Lorcian1 小时前
web前端12--表单和表格
前端·css·笔记·html5·visual studio code
问道飞鱼1 小时前
【前端知识】常用CSS样式举例
前端·css
wl85112 小时前
vue入门到实战 三
前端·javascript·vue.js
ljz20162 小时前
本地搭建deepseek-r1
前端·javascript·vue.js
爱是小小的癌2 小时前
Java-数据结构-优先级队列(堆)
java·前端·数据结构
傻小胖3 小时前
vue3中Teleport的用法以及使用场景
前端·javascript·vue.js
wl85113 小时前
Vue 入门到实战 七
前端·javascript·vue.js
Enti7c3 小时前
用 HTML、CSS 和 JavaScript 实现抽奖转盘效果
前端·css
LCG元4 小时前
Vue.js组件开发-使用Vue3如何实现上传word作为打印模版
前端·vue.js·word