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

相关推荐
去伪存真17 小时前
AI Agent Harness 深度测评与技术选型实战
前端·agent
FRing0320 小时前
vue2干货总结7(自定义指令、插槽、单页应用程序、路由的使用(VueRouter))
开发语言·前端·vue.js·vue2
疯华整猫1 天前
被杀掉之后:我把 Android 的「唤起 + 常驻」重做了一遍
前端·面试·架构
IT_陈寒1 天前
Java开发实战:从入门到精通
前端·人工智能·后端
风骏时光牛马1 天前
生成一个AI转岗经历标题,只需要一个标题,不需要其他的任何文本。
前端
Csvn1 天前
Monorepo
前端
Csvn1 天前
流水线
前端
Csvn1 天前
微前端架构
前端
Linux-lucky1 天前
45-Linux学习之旅之防火墙与WEB加固
linux·前端·网络·学习·ubuntu
风骏时光牛马2 天前
生成一个移动端标题,只需要一个标题,不需要其他的任何文本。
前端