在webstorm中配置sass编译环境

1.下载ruby

        下载地址:ruby下载

        

                           

2.安装ruby

        下载之后,有一个exe安装包

        双击exe文件 ,并选择自己的安装位置这个位置一定要记得,需要在webstorm中使用)。其他的步骤默认安装即可。

3.安装sass

        ruby安装成功后,打开cmd命令行,输入 gem install sass ,回车后进行安装步骤(一定要保证网络稳定,不然可能安装失败)。

        安装成功后会在末尾显示:5 gems installed。然后输入 sass -v 查看版本号,如果有版本号则表示安装成功,如果没有则表示没成功,则需要重新安装。

        打开ruby 安装路径的文件夹,在bin文件可以看到sass.bat和scss.bat文件。这个文件很重要,需要在webstorm中配置

4. 在webstorm中配置sass环境

        以上ruby和sass都安装成功之后,就开始配置webstorm。

这样就配置好了。

5. 测试

        在webstorm中建立文件scss文件测试。

         注意: 这里文件名后缀是scss噢,不要写成sass了

建立之后会自动生成.css文件和css.map文件即可,里面的写的sass样式会转为css样式。

在html界面引用的时候还是引用css后缀的文件。

备注:

        原文:在webstorm中配置sass的开发编译环境_webstorm编译sass-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/179029.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MATLAB源码-第75期】基于模拟退火算法(SA)的栅格路径规划,输出做短路径图和适应度曲线。

操作环境: MATLAB 2022a 1、算法描述 模拟退火算法是一种启发式优化算法,通常用于解决组合优化问题,例如旅行商问题和图着色问题。它模拟了固体材料在退火过程中逐渐冷却达到稳定状态的行为,以寻找问题的全局最优解。 以下是模…

故障演练的关键要素及重要性

故障演练是一种有计划的、模拟真实生产环境故障的活动。通过故意引入故障、模拟系统组件失效或模拟其他异常条件,团队可以观察并评估系统在这些情况下的反应。这有助于发现潜在的问题、改进应急响应和提高系统整体的可用性。 一、故障演练的关键要素 计划性&#xf…

异常--Java

cry…catch使用 /*需求:测试除法器(try...catch)* 测试人:小王* 测试日期:2023/11/15* */ package yichang_test1;import java.util.InputMismatchException; import java.util.Scanner;public class TestException2 …

【ROS导航Navigation】四 | SLAM与导航 | 自主移动的地图构建 (更新ing)

致谢&#xff1a;ROS赵虚左老师 Introduction Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 参考赵虚左老师的实战教程 实现比较简单&#xff0c;步骤如下: 编写launch文件&#xff0c;集成SLAM与move_base相关节点&#xff1b;执行launch文件并测试。 <la…

无人机内存卡数据恢复

1.插入内存卡 2.选择对应的品牌 3.点击恢复 建议&#xff1a;发现数据打不开或者丢失情况&#xff0c;建议及时断电&#xff0c;以免影响数据的正常恢复&#xff01; #无人机##数据恢复##储存卡#

刚开始测试自动化? 这些错误不要犯,一定要看!别踩坑!!

我经常与一些客户打交道&#xff0c;他们的测试自动化能力要么刚刚开始&#xff0c;要么正在努力成长&#xff0c;而且他们常常都犯同样的致命错误。 虽然他们可能了解测试自动化的基础知识&#xff0c;但是他们仍然认为脚本化测试的价值在于通过自动执行脚本而不是手工执行来…

如何在Windows 10中进行屏幕截图

本文介绍如何在Windows 10中捕获屏幕截图&#xff0c;包括使用键盘组合、使用Snipping Tool、Snipp&Sketch Tool或Windows游戏栏。 使用打印屏幕在Windows 10中捕获屏幕截图 在Windows 10中捕获屏幕截图的最简单方法是按下键盘上的PrtScWindows键盘组合。你将看到屏幕短暂…

linux 网络 cat /proc/net/dev 查看测试网络丢包情况

可以通过 cat /proc/net/dev 查看测试网络丢包情况&#xff0c;drop关键字&#xff0c;查看所有网卡的丢包情况 还可以看其他数据&#xff0c; /proc/net/下面有如下文件

2023年 华为杯数学建模 E题

本科大三的时候&#xff0c;打过一次美赛&#xff0c;当时租了一个民宿&#xff0c;和队友一起度过了专注的四天。当时比赛结束之后&#xff0c;拿着手机&#xff0c;看到四天没回的消息&#xff0c;四天没刷过的朋友圈&#xff0c;有种很新奇的感觉&#xff0c;谢谢美赛给了我…

微信这4个功能容易暴露隐私,记得关闭

每天高频使用微信的我们&#xff0c;常常觉得安全无忧&#xff0c;然而这样的想法并不准确。尽管微信本身的安全性能极高&#xff0c;但若我们不主动设置相关功能&#xff0c;个人隐私和位置信息仍可能被暴露。 在微信朋友圈上&#xff0c;有些人喜欢分享生活的点滴&#xff0c…

数据备份软件调研与使用

目录 目的 Filezilla工具介绍&#xff1a; 获取地址 安装步骤 ①下载客户端和服务端​编辑 ②服务端server上传至目标服务器 安装服务端 server端登录 server配置 安装client 遇到的问题FAQ&#xff1a; ​编辑文档 目的 为确保企业数据安全、避免被非法入侵、数据…

Axure中文攻略,试试这个免费方法,轻松汉化!

Axure是专门为原型设计而生的专业设计产品&#xff0c;也是产品经理必须学习的工具之一。原型设计工具来自Sketchh、Figma、Axure&#xff0c;我们可以发现它们都是海外原型设计工具。中国人使用海外开发的软件并不那么容易。如何汉化Axure&#xff1f;即时设计是一种免费的新一…