在webstorm中配置sass编译环境

news2024/9/20 8:07:50

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.coloradmin.cn/o/1212749.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【华为HCIP | 华为数通工程师】IPV4与IPV6 高频题(2)

个人名片: 🐼作者简介:一名大三在校生,喜欢AI编程🎋 🐻‍❄️个人主页🥇:落798. 🐼个人WeChat:hmmwx53 🕊️系列专栏:🖼️…

十九章总结

一.Java绘图类 1.Graphics类 Graphics类是所有图形上下文的抽象基类,它允许应用程序在组件以及闭屏图像上进行绘制。Graphics类封装了Java支持的基本绘图操作所需的状态信息,主要包括颜色、字体、画笔、文本、图像等。 2.Graphics2D类 Graphics2…

【软考篇】中级软件设计师 第四部分(一)

中级软件设计师 第四部分(一) 二十九. 程序设计语言概述29.1 解释、编译29.3 编译程序29.4 后缀式29.5 文法定义29.6 正规式29.7 有限自动机29.8 语法分析方法 三十. 法律法规30.1 作品所属权30.2 商标有效期30.3 职务作品所属权30.4 单位与委托30.5 商标…

Python 获取北上广深历史天气数据并做数据可视化

嗨喽,大家好呀~这里是爱看美女的茜茜呐 知识点: 动态数据抓包 requests发送请求 结构化非结构化数据解析 开发环境: python 3.8 运行代码 pycharm 2022.3.2 辅助敲代码 专业版 requests 发送请求 pip install requests parsel 解析数据 pip install parsel …

jbase实现通用码表

没有通用码表的体系是不完美的,当年我用C#能实现的通用码表,现在在java一样的实现了,通用码表对提高开发效率和降低开发成本的作用巨大,开发可以专注写业务,而不比被太多的维护界面束缚。进而体现在产品竞争力上面&…

Radiology 谈人工智能在放射学领域的10个预测方向 [文献阅读]

人工智能(AI)和信息学正在改变放射学。十年前,没有哪个专家会预测到今天放射人工智能行业的蓬勃发展,100多家人工智能公司和近400种放射人工智能算法得到了美国食品和药物管理局(FDA)的批准。 不到一年前,即使是最精明的预言家也不会相信这些…

Figma插件合集大放送,效果嘎嘎棒!

近日,Figma被Adobe收购的消息在设计领域引起了极大的轰动。作为海外知名的设计工具,Figma对设计圈的影响不容小觑。Figma插件是设计师选择Figma的重要原因。然而,设计软件是一个快速更新和迭代的行业。在关注海外设计软件的同时,也…

python中的字符串转字节码

res int.from_bytes(hello.encode(), byteorderlittle)res的结果为478560413032,这个结果怎么计算得到的呢? 将hello的每个字母的ascii码从右往左排列,拼接起来转成十进制就是res的结果。 拼接的结果为:011011110110110001101100…

JWT登录认证(1登录)

JwtUtil package com.lin.springboot01.utils; import com.auth0.jwt.JWT; import com.auth0.jwt.algorithms.Algorithm; import java.util.Date; import java.util.Map;public class JwtUtil {private static final String KEY "liner2332";//接受业务数据&#xf…

【Mycat2实战】二、Mycat安装部署

1. Mycat下载 Mycat官网下载地址,点击直接前往:http://www.mycat.org.cn/ Mycat 有提供编译好的安装包,支持 windows、Linux、Mac、 Solaris 等系统上安装与运行。 本文及后续系列的文章都是使用Linux的系统进行操作。 这里我们选择使用文…

Leetcode周赛371补题(3 / 3)

目录 1、找出强数对的最大异或值 - 暴力 2、高访问员工 - 哈希表 模拟 3、最大化数组末位元素的最少操作次数 - 思维 贪心 1、找出强数对的最大异或值 - 暴力 找出强数对的最大异或值 I class Solution {public int maximumStrongPairXor(int[] a) {int na.length,max0;…

Linux 小程序-进度条

1.进度条准备知识 1.1回车与换行 以前的键盘会有一个这样的按键 ,这个键就是回车与换行。 回车:从当前行回退到当前行的起始位置。 换行:从当前行切换到下一行的该位置。 有了以上的认识我们可以写出一个简单的倒计时代码: 注意&a…

如何掌握项目管理的5个阶段?

项目管理协会(PMI)创建了一个五步项目管理流程,即从启动、规划、执行、监控到结束,为项目经理更好地管理项目提供了现成的基础。如果你正为范围蔓延、返工或项目总体混乱而苦恼,那么遵循项目管理的五个阶段&#xff0c…

【装包拆包----泛型】

文章目录 装箱和拆箱泛型创建一个泛型数组泛型的上界泛型方法 装箱和拆箱 装箱: 把基本数据类型给到引用数据类型 public static void main(String[] args) {//自动装包//第一种装包Integer c 12;//第二种装包int a 7;Integer b a;//显示装包Integer aa Intege…

什么是自动化测试框架?

无论是在自动化测试实践,还是日常交流中,经常听到一个词:框架。之前学习自动化测试的过程中,一直对“框架”这个词知其然不知其所以然。 最近看了很多自动化相关的资料,加上自己的一些实践,算是对“框架”…

应用协议安全:Rsync-common 未授权访问.

应用协议安全:Rsync-common 未授权访问. Rsync 是 Linux 下一款数据备份工具,支持通过 rsync 协议、ssh 协议进行远程文件传输。其中 rsync 协议默认监听 873 端口,如果目标开启了 rsync 服务,并且没有配置 ACL 或访问密码&#…

Node.js 安装配置

文章目录 安装检测Node是否可用 安装 首先我们需要从官网下载Node安装包:Node.Js中文网,下载后双击安装没有什么特殊的地方,安装路径默认是C盘,不想安装C盘的话可以选择一下其他的盘符。安装完成以后可以不用配置环境变量,Node安装已经自动给…

【算法总结】归并排序专题(刷题有感)

思考 一定要注意归并排序的含义,思考归并的意义。 主要分为两个步骤: 拆分 每次对半分(mid l r >> 1)输入:raw整块,输出:raw左块 raw右块 合并 每次都要对raw左块、 raw右块按照某种规则进行合并输入&#xf…

计算机基础知识53

模板之过滤器 # HTML被直接硬编码在 Python代码之中,Django的 模板系统(Template System) # 过滤器给我们提供的有六十多个,但是我们只需要掌握10个以内即可 过滤器名称就是函数名 # 语法:{{ obj|filter__name:param }} 变量名字…

多个Obj模型合并

MergeObj(合并Obj模型) 1 概述 由于项目原因,需要下载谷歌地图上的模型,关于谷歌模型下载的,见我的CSDN博客. 由于下载谷歌地图上的数据,会分多个模块下载。下载完成后,怎么合并,在…