位置: 编程技术 - 正文

vue-cli + sass 的正确打开方式图文详解(vue assign)

编辑:rootadmin

推荐整理分享vue-cli + sass 的正确打开方式图文详解(vue assign),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuecli scss,vue cli ssr,vue cli ssr,vue cli ssr,vue中sass样式不生效,vue-cli ssr,vue-cli ssr,vue cli ssr,内容如对您有帮助,希望把文章链接给更多的朋友!

关于在vue-cli搭建的项目中怎么配置sass,网上搜到的基本是这种答案:

但是我认为,直接将样式写在每个单文件的<style>里,是十分不明智的做法。且不说node-sass安装过程的各种坑,内嵌的<style>也让组件显得十分混乱。想象一下你在修改某个methods时必须拖动滚轮穿越几十上百行的css代码,又或者为了修改一组样式,却找不到对应的css文件,因为它们散布在vue文件里。。。

在我看来,正确的做法应该是单独管理sass文件,然后在main.js中直接引入编译好的css文件。像iView, ElementUI 都是采用这种做法。

如果你认同并且打算采用这种方式,看下面这个具体的例子:

项目结构如上图,style文件夹下是分门别类的scss文件,方便管理和后期维护。然后在main.scss引入所有的scss样式片段,使用 sass --watch main.scss:main.css 命令监听并将scss文件编译为css文件。最后在main.js中引入main.css文件。这样你就可以直接在元素上添加class,然后在scss中畅快写样式了。

vue-cli + sass 的正确打开方式图文详解(vue assign)

当然我们不希望每次手动输入这些命令,初步想法是通过修改dev命令,:

但是这样并不能达到效果,因为每次只会启动前一个命令。于是考虑到使用批处理来实现:

将这两个.bat放在根目录下,然后配置package.json:

这样就可以使用 npm run dev 一键启动 hot reload 和 sass watch了。

总结

以上所述是小编给大家介绍的vue-cli + sass 的正确打开方式图文详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

vue中v-model动态生成的实例详解 vue中v-model动态生成的实例详解前言:最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态

探讨Vue.js的组件和模板 摘要:指令是Vue.js中一个重要的特性,主要提供了一种机制将数据的变化映射为DOM行为。那什么交数据的变化映射为DOM行为,Vue.js是通过数据驱动的,所

基于vue.js快速搭建图书管理平台 Vue.js是当下很火的一个JavaScriptMVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的

标签: vue assign

本文链接地址:https://www.jiuchutong.com/biancheng/373340.html 转载请保留说明!

上一篇:Vue2.0 axios前后端登陆拦截器(实例讲解)(vue前端后端)

下一篇:vue中v-model动态生成的实例详解(vue动态引入模块)

  • 增值税发票作废了税钱退还吗
  • 运费增值税税率有5吗
  • 货运代理费计入固定资产吗
  • 跨境电商的钱怎么到账
  • 服务业发票的开具范围包括什么
  • 营改增试点纳税人提供有形动产租赁服务,税率为
  • 承兑 拆分
  • 广告媒体类的企业怎么核算成本?
  • 别人的项目挂靠我公司怎么做账?
  • 劳动合同的履行包括什么原则
  • 员工工资超过多少钱要交税
  • 企业所得税税负怎么算
  • 小规模免了增值税怎么办
  • 设备租赁费发票
  • 税收分类编码风险评估
  • 增值税如何确认
  • 电子承兑汇票怎么打印出来
  • 库存成本与实际成本不符
  • 企业报税提交清算了怎么撤销
  • 企业接收股东划入资产作为收入处理有所得税差异吗
  • 微型小型车
  • 高新企业奖励补贴交税吗
  • 1000元的打印机双十一满减可以减150吗少
  • 专项资金支出时能直接转出吗
  • 销售返利计入什么费用
  • 民营非盈利机构
  • 企业所得税的概述
  • 最大交易笔数什么意思
  • 公司怎么查已报销发票
  • 常见造成账目差异的原因
  • 对外支付企业所得税计税依据
  • 克拉克湖国家公园
  • 成本会计工作流程表
  • 新能源产业发展历程
  • 股东以原材料出资
  • 云服务器 chia
  • 瑞吉接送
  • css动画效果代码
  • ChatGPT的了解与初体验
  • 精灵图的使用
  • 一般纳税人开发票给小规模纳税人
  • 赠送油卡怎么使用
  • 免征增值税的项目可以开专票吗
  • 电子发票开出后如何查看
  • 差旅费报销流程图及分析解释
  • 期初库存和期末库存可以修改吗
  • SQL Server Native Client下载 SQL Server Native Client安装方法
  • 公司股东的权利和义务有哪些
  • 员工报销的差旅费会计分录
  • 长期待摊费用进项税分录
  • 收到银行承兑汇票后,如何取钱
  • 什么是长期的
  • 资产负债表和科目余额表怎么核对
  • 年底本年利润如何处理
  • 账本结转下年怎么划线
  • 工商联络注册
  • sql server key
  • 三星笔记本电脑
  • 深度Win7 64位系统默认输入法图标如何个性化设置
  • centos添加用户到组
  • dwm22.exe病毒
  • ssh实现登录功能
  • win10怎么查看磁盘是固态还是机械
  • 开启win10
  • 2016年首个熊猫电站是哪一个
  • unity的粒子系统在哪
  • JavaScript中的数据类型分为两大类
  • web前端开发应届生简历
  • 安卓自定义app
  • linux查找目录的命令
  • python正则匹配url
  • vue实现下载功能
  • javascript例题
  • Python实现Sqlite将字段当做索引进行查询的方法
  • jquery滚动条滚动到指定位置
  • 天津怎么网上交电费
  • 公司缴税款可以退税吗
  • 出口退税函调回函时间
  • 3.0t交强险
  • 湖南什么时候实行电子驾驶证
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设