位置: 编程技术 - 正文

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动态引入模块)

  • 建筑业增值税税负预警
  • 单位产品销售税金
  • 残保金在职职工人数临时工算吗
  • 企业所得税研发费用怎么填
  • 成本法长期股权投资账务处理
  • 企业接受捐赠的账务处理
  • 股东捐赠给企业资金保壳
  • 运输公司赔偿计入什么科目
  • 土地增值税清算比例的计算
  • 公司收到股东的投资款以后怎么处理
  • 金蝶财务软件如何打印凭证
  • 没有签字的支出凭证怎么处理?
  • 收到公司of
  • 食品发票可以抵扣所得税吗
  • 企业所得税季报和年报的区别
  • 上个月有留抵税这个月怎么结转税金
  • 资本公积要交印花税账簿税吗
  • 开通分期付款
  • 购买设备对方垫付运费会计分录
  • 工程和技术研究和试验发展
  • windows7中右键的作用
  • 现金流量表的计算公式原理
  • 小规模购进商品只收到记账联专票
  • 开具成品油发票规格型号有哪些要求
  • PHP:mb_encode_numericentity()的用法_mbstring函数
  • 微博 照片水印
  • 预售卡怎么做会计分录
  • 怎么关闭windows defender
  • PHP:mcrypt_enc_self_test()的用法_Mcrypt函数
  • 仓储服务和不动产租赁
  • 温特孚灯具质量怎么样
  • 餐饮定额发票能报销吗怎么报销
  • php比较大小
  • 黏菌算法总结
  • php中自定义函数的语法格式
  • 工程结算结算gbq文件怎么做
  • vue移动
  • 金融企业的代理业务
  • 固定资产盘盈税务处理政策
  • 账面未分配利润等于净利润?
  • 成本不够用怎么办baixing
  • python缩进有什么作用
  • 设计模式模板方法和策略模式对比
  • sqlserver 中charindex/patindex/like 的比较
  • 一般纳税人企业所得税怎么征收
  • 房产公司结转成本的会计分录
  • 资源税计税依据是开采量还是销售量
  • 土地转让需要批准吗
  • 高新技术企业取消资格的程序
  • 先付款后开发票的会计分录?
  • 企业购车购置税怎么算
  • 主营业务成本的贷方是什么
  • 普通发票和增值发票的区别在哪里
  • 应付账款的贷方等于预收账款的借方
  • 工业企业成本占比多少合适
  • 内部资金管理实施细则
  • DBCC CHECKIDENT 重置数据库标识列从某一数值开始
  • 限制root用户远程登录
  • 重装系统 xp
  • linux文件压缩和备份实验
  • information_schema翻译
  • win7的语言栏不见了
  • win8不能安装软件
  • perl匹配空行
  • linux中crontab的用法
  • Python分析学校四六级过关情况
  • WWW封装共享 [复制链接]
  • jquery源码分析
  • javascript的
  • AutoPainting
  • javascript中array数组对象的含义及常用方法
  • JavaScript中数组长度的属性
  • 你知道什么是布
  • 关于怀孕在线咨询
  • jquery将文本框设置为只读
  • 宁夏电子税务局登录入口
  • 税务局窗口业务
  • 河北省国税局发展前景
  • 税务宪法宣传简报
  • 国家税务贵州省税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设