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

相关推荐
IT_陈寒15 分钟前
Python性能优化:5个被低估但效果惊人的内置函数实战解析
前端·人工智能·后端
00后程序员张19 分钟前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
前端架构师-老李31 分钟前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron
小白学大数据32 分钟前
双管齐下:结合显式等待与Timeout处理复杂Ajax网页
前端·javascript·ajax
Rysxt_35 分钟前
Electron 教程:从背景到 Vue3 桌面应用开发
前端·javascript·electron
luckyPian44 分钟前
前端+AI:CSS3(二)
前端·css·css3
JiKun1 小时前
一键配置 Web 前端开发环境(PowerShell 自动化脚本)
前端·windows·程序员
合作小小程序员小小店1 小时前
web网页开发,在线%考试,教资,题库%系统demo,基于vue,html,css,python,flask,随机分配,多角色,前后端分离,mysql数据库
前端·vue.js·后端·前端框架·flask
慧一居士1 小时前
ES6(ECMAScript 2015)功能介绍,使用场景,对应功能点完整使用示例
前端