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也可使用全局变量

相关推荐
合作小小程序员小小店1 小时前
web网页开发,在线%考试管理%系统,基于Idea,vscode,html,css,vue,java,maven,springboot,mysql
java·前端·系统架构·vue·intellij-idea·springboot
天天进步20152 小时前
CSS Grid与Flexbox:2025年响应式布局终极指南
前端·css
Boop_wu3 小时前
[Java EE] 计算机基础
java·服务器·前端
Novlan13 小时前
TDesign UniApp 组件库来了
前端
用户47949283569153 小时前
React DevTools 组件名乱码?揭秘从开发到生产的代码变形记
前端·react.js
顾安r4 小时前
11.8 脚本网页 打砖块max
服务器·前端·html·css3
倚栏听风雨4 小时前
typescript 方法前面加* 是什么意思
前端
狮子不白4 小时前
C#WEB 防重复提交控制
开发语言·前端·程序人生·c#
菜鸟‍4 小时前
【前端学习】阿里前端面试题
前端·javascript·学习
Jonathan Star4 小时前
LangFlow前端源码深度解析:核心模块与关键实现
前端