位置: 编程技术 - 正文

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

  • 外商投资企业要实缴资本么
  • 补交印花税怎么做账
  • 生产型企业出口退税账务处理
  • 支付职工医疗保险怎么查
  • 金税四期对增值税发票的比对
  • 交强险怎么报销流程
  • 长期待摊费用的账务处理
  • 个人所得税哪里报税
  • 利税总额是应交还是已交
  • 清洗汽车的目的
  • 股票投资收益是指投资者从购入股票开始到出售为止整
  • 现金流管理模式
  • 处置子公司的收益
  • 增值税税控系统专用设备抵减增值税
  • 员工个人学历教育费用不能在企业所得税前列支
  • 免税的和不免税的可以开在一张发票上吗
  • 个人名下车辆过户
  • 发票是不是一定要三签才能开
  • 因腐败因素形成的损失企业所得税如何处理?
  • 业绩补偿协议
  • 企业所得税抵缴欠税
  • 工程前期咨询收费标准
  • 过期商品报损账务处理?
  • 超过五年的未弥补亏损怎么处理?
  • 办税员的工作职责
  • u盘中装系统
  • PHP:mb_convert_encoding()的用法_mbstring函数
  • 发票认证平台上不去
  • 为什么浏览器自动打开
  • vue引入mui
  • 设计费包含概算费用吗
  • 打开苹果safari浏览器
  • 用交易所转付货款怎么转
  • 现金折扣优惠
  • 持有可转换债券的会计分录
  • 长期股权投资凭证
  • 小规模纳税人实收资本印花税怎么算
  • php跳转微信支付
  • win11装双系统虚拟机mac
  • vue3 原理
  • 没有收入该怎么办
  • 高铁票进项抵扣计算错了 怎么办理
  • 免税收入与不征收的区别
  • 实收资本属于限定性净资产吗
  • 民办非企业单位是私立还是公立
  • 工作失误扣工资
  • 施工企业机械租赁费用
  • 取得无形资产发生的相关费用
  • 凭空多出来的原材料的账务处理?
  • 税务监制章验证无效
  • 安装工程什么时候套脚手架搭拆
  • 资产评估增值的税务处理
  • 单位购买防疫物资请示
  • 施工企业的具体工作有哪些
  • 员工宿舍的物业费可以抵扣进项税吗
  • 发票红冲怎么回事
  • 销售成本包括销项税额吗
  • 什么是企业支付宝
  • mysql连接时间长怎么优化
  • sqlserver1053怎么解决
  • win8系统怎么安装微信
  • xp系统cad32位用哪个版本
  • window系统怎么取消开机密码
  • osx安装win10
  • win1020h2版本千万别更新
  • w10 2021年更新
  • 嵌入式linux开发用什么语言
  • 电脑开机后出现win7画面后一直黑屏
  • linux rpm包怎么安装
  • js特殊字符有哪些
  • socket怎么用
  • jquery.form
  • javascript教程
  • js实现ping一个ip地址
  • eclipse折叠代码块if else工具
  • 在python中通过什么语句创建一个空集合
  • android sdk api文档
  • 如何找回电子税务局企业密码
  • 增值税已申报但是忘清卡
  • 电子低保证书在哪找
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设