位置: IT常识 - 正文

将scss文件转换成css文件(sass转化为css)

编辑:rootadmin
将scss文件转换成css文件

推荐整理分享将scss文件转换成css文件(sass转化为css),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:sch如何转成dsn文件,sch文件转换为pdf文件,用scss如何自动生成css,怎么把文件转换成scs格式,sass转化为css,.scss文件,scss转为css,scss转为css,内容如对您有帮助,希望把文章链接给更多的朋友!

大家平时做项目肯定都习惯了使用scss或者less去写样式,如果是使用工程化的项目我们可以借助插件很方便的将scss或者less转换成css。那如果我们没有使用工程化,比如简单的demo或者官网等项目又希望可以通过scss去编写文件应该怎么办呢,我们可以借助sass插件去帮我们转换生成css样式文件,原理和工程化其实是一样的,只是我们手动的去触发了sass的能力。

1.安装sass将scss文件转换成css文件(sass转化为css)

首先在我们的项目下安装sass

npm i sass2.使用命令转译scss或sass文件

假设我们的页面都在page目录下,每个页面为一个文件夹,存放的是html文件和scss文件,例如下面的index 在index.html文件中我们无法直接使用scss文件,所以我们可以使用下面的命令先将scss文件转译为css文件:

sass .\index.scss .\index.css

注意控制台的起始路径,路径拼接以后一定要指向一个具体的文件。假如我的项目名为demo,它存放在D盘的project文件夹下,我的控制台的窗口显示起始路径假设为D:\project,那么我们的命令应该更改为:

sass .\demo\page\index\index.scss .\demo\page\index\index.scss

运行这段命令后sass会将我们指定的scss文件转换为css文件 这个时候我们就可以在html中引入转换好的css文件

3.监听scss变化更新css文件

在开发中如果我们总是手动输入命令去生成css文件这肯定是让人无法忍受的,所以我们可以借助一个指令去完成监听,它就是--watch,当我们输入如下命令时

sass --watch .\demo\page\index\index.scss .\demo\page\index\index.scss

这个时候就会开启指定文件的更改监听,每当我们更改保存index.scss文件时,index.css都会自动被更新。

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

上一篇:【计算机网络】网络层IP协议(计算机网络拓扑结构有哪些)

下一篇:关于oss使用sts 后台签发临时token前端直传大文件的错误记录(oss使用场景)

  • mvc框架网页设计如果做一个展示品牌形象的网站,需要在设计上下功夫

    mvc框架网页设计如果做一个展示品牌形象的网站,需要在设计上下功夫

  • win10开机时间在哪看(win10电脑开机时间)

    win10开机时间在哪看(win10电脑开机时间)

  • 抖音网络连接失败是什么意思呢(抖音网络连接失败怎么办)

    抖音网络连接失败是什么意思呢(抖音网络连接失败怎么办)

  • 耳塞式耳机老是滑出来(为什么耳机塞总是掉)

    耳塞式耳机老是滑出来(为什么耳机塞总是掉)

  • 闲鱼怎么让别人看不到我卖的东西(闲鱼怎么让别人看不见我卖过的东西)

    闲鱼怎么让别人看不到我卖的东西(闲鱼怎么让别人看不见我卖过的东西)

  • 键盘上句号是哪一个键(键盘上的句号是哪个键)

    键盘上句号是哪一个键(键盘上的句号是哪个键)

  • 华为手机照片文件夹名称(华为手机照片文字转换成文字)

    华为手机照片文件夹名称(华为手机照片文字转换成文字)

  • 电脑屏幕壁纸如何设置(电脑屏幕壁纸如何锁定)

    电脑屏幕壁纸如何设置(电脑屏幕壁纸如何锁定)

  • 苹果怎么下载2个微信(苹果怎么下载233乐园正版)

    苹果怎么下载2个微信(苹果怎么下载233乐园正版)

  • ipad关机了还能追踪吗(ipad关机了还能播放声音吗)

    ipad关机了还能追踪吗(ipad关机了还能播放声音吗)

  • 手机qq闪退是什么原因(手机qq闪退怎么办)

    手机qq闪退是什么原因(手机qq闪退怎么办)

  • 京东评价怎么修改(京东评价怎么改)

    京东评价怎么修改(京东评价怎么改)

  • 手机如何剪辑视频(手机如何剪辑视频片段)

    手机如何剪辑视频(手机如何剪辑视频片段)

  • vue怎么做字幕(vue视频添加说话字幕)

    vue怎么做字幕(vue视频添加说话字幕)

  • 苹果11长按电源键不能关机(苹果11长按电源键是siri)

    苹果11长按电源键不能关机(苹果11长按电源键是siri)

  • pentium2是指什么(pentium ll)

    pentium2是指什么(pentium ll)

  • 电脑怎么下ps软件(电脑怎么下载ps的软件)

    电脑怎么下ps软件(电脑怎么下载ps的软件)

  • 手机qq如何查看谁特别关心了我(手机qq如何查看密码是多少)

    手机qq如何查看谁特别关心了我(手机qq如何查看密码是多少)

  • 联通卡为什么发不了短信(联通卡为什么发送不了)

    联通卡为什么发不了短信(联通卡为什么发送不了)

  • 苹果6越来越卡怎么办(苹果6越来越卡怎么回事)

    苹果6越来越卡怎么办(苹果6越来越卡怎么回事)

  • 苹果手机怎么设置屏蔽陌生人电话(苹果手机怎么设置密码锁屏)

    苹果手机怎么设置屏蔽陌生人电话(苹果手机怎么设置密码锁屏)

  • 手机贴吧私信在哪看(贴吧app私信)

    手机贴吧私信在哪看(贴吧app私信)

  • mim.exe是什么进程 有什么用 mim进程查询(msmpeng.exe是什么进程)

    mim.exe是什么进程 有什么用 mim进程查询(msmpeng.exe是什么进程)

  • 织梦两种内容模型的文档进行合并(织梦怎么用模板建站)

    织梦两种内容模型的文档进行合并(织梦怎么用模板建站)

  • 个人房产投资入股公司过户
  • 纸质发票红冲操作流程
  • 会计准则折旧年限规定最新
  • 未完工工程如何做绩效评价
  • 境外设计费涉及税收
  • 车辆购置税完税证明二维码用什么扫
  • 延迟交款收息做什么科目?
  • 未计提企业所得税怎么写分录
  • 公司人事怎么办公积金提取流程?
  • 视同销售存货账务处理方法是什么?
  • 工会账户销户划拨流程
  • 购买货物待销售会计分录
  • 定额发票已经取得怎么办
  • 贷款和应收款项在活跃市场中没有报价
  • 取得企业增值税发票
  • 餐饮行业原材料
  • 易票365是哪家公司的
  • 建安官网
  • 企业为生产线员工怎么办
  • 取消票种核定需什么手续
  • 外协加工费会计分录
  • 简易办法计税销售额如何填写
  • 购进货物赠送客户增值税处理
  • win11如何安装安卓app
  • 航信税控系统如何开销货清单
  • 怎样启动powerpoint
  • 资产置换会计准则
  • 车辆理赔过程中,赔付款给谁
  • 存货计划成本法好处
  • 待认证进项税额借贷方向
  • 重装系统后怎么恢复原来的系统
  • 稽查补交的税款怎么处理
  • wlan和蜂窝版的区别
  • 股权转让定金怎么做账
  • 印花税减半征收优惠政策2020
  • vue使用什么语言
  • 通讯费补贴会计怎么做账
  • 企业折旧申报备案怎么写
  • 织梦官网
  • 电子承兑汇票贴现怎么操作
  • 刷pos机的如何记会计分录
  • 无法收回的房租押金出什么会计科目
  • 中国移动发票抬头开错了可以重开吗
  • SQL Server 2005 DTS导入平面数据出现错误解决方案
  • 教育培训行业成功案例
  • 股东权益合计是净资产吗
  • 应付股利科目怎么结转
  • 暂估入库后发票来不了
  • 主营业务收入增加计入借方还是贷方
  • 人民币报关退税流程
  • 期末计提利息怎么算
  • 劳务费如何做账务处理
  • 限额领料单属于什么凭证多选题
  • 建账固定资产的期初科目是什么
  • 企业进行短期投资的目的包括
  • sql自定义变量
  • centos 7安装教程
  • win8怎么扩展c盘
  • win8系统运行慢怎么办
  • ubuntu系统管理
  • hipo.dll是什么
  • winxp系统介绍
  • Linux下通过script 命令记录(数据库)操作步骤
  • 电脑审核策略更改是什么意思
  • mac怎么找自己下载的应用
  • win8系统截图工具快捷键
  • opengl es 3.2
  • 认识 认知
  • unity平移场景视图怎样操作?
  • 纸嫁衣6攻略全文图解
  • python基础总结
  • javascriptj
  • jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
  • angular js表达式
  • node.js 10实战
  • unity meshcollider
  • jquery ui draggable
  • csp2020成绩查询
  • 医院法制科工作职责
  • PLC交通信号灯控制程序设计
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设