首页 > 其他分享 >使用Webstrom自动编译SASS/SCSS为CSS

使用Webstrom自动编译SASS/SCSS为CSS

时间:2023-05-08 17:34:36浏览次数:43  
标签:SCSS sass SASS Webstrom -- Ruby Compass 安装 gem

sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)

window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。

Ruby官方下载地址

安装完成后需测试安装有没有成功,运行CMD输入以下命令:

ruby -v
//如安装成功会打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

如上已经安装成功。但因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。

//1.删除原gem源
gem sources --remove https://rubygems.org/

//2.添加国内gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//3.打印是否替换成功
gem sources -l

//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://gems.ruby-china.com/

Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass,你需要输入下面的命令:

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

安装完成之后,你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中:

sass -v
Sass 3.x.x (Selective Steve)

compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

webstrom配置SCSS

setting ==> tools ==> file Watchers ==> + ==>scss

program设置为:
D:\rubyinstaller\bin\scss.bat (路径看Ruby安装路径)

Arguments设置为:
--no-cache --update --sourcemap -t compressed watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

标签:SCSS,sass,SASS,Webstrom,--,Ruby,Compass,安装,gem
From: https://www.cnblogs.com/zhanlibiao/p/17382403.html

相关文章

  • Mac M系列芯片 vue前端node-sass兼容问题解决
    0、由于M系列芯片是arm架构,在使用brew安装node时都是arm的node,但是[email protected]版本中不支持arm架构的出现如下报错:Error:NodeSassdoesnotyetsupportyourcurrentenvironment:OSXUnsupportedarchitecture(arm64)withUnsupportedruntime(88)Formoreinfor......
  • uniapp使用scss定义全局css
    1.新建scss文件,定义各种全局css样式$orange:#ee5313!default;//主题色:橙色$darkOrange:#d43a11;//深橙色$color:#333;$gray:#999;//灰色$lightGray:#bbb;//浅灰$grayBg:#f3f3f3!important;//body灰色背景$white:#fff;//白色$blue:#1a......
  • Vue项目如何配置、切换主题颜色(mixin + scss方式,简单高效)
    Action一.首先,引入scss依赖(node-sass,sass-loader)npminstallnode-sasssass-loader--save-dev1二.项目样式文件目录介绍1.此处我将项目中的公共样式文件放到了src/style目录下,其中index.scss是以供全局使用的一些基本样式,在main.js文件中引入即可全局使用(图2)。_theme.scs......
  • 将scss文件转换成css文件
    将scss文件转换成css文件npmisass使用命令转译scss或sass文件sass.\index.scss.\index.css监听scss变化更新css文件sass--watch.\demo\page\index\index.scss.\demo\page\index\index.scss......
  • node-sass报错?三步解决!!!
    1,报错内容2.解决方案一、本地安装的node和node-sass不匹配//查看node版本node-v二、下载源在国外,更换中国镜像源//更换淘宝镜像源npmconfigsetregistryhttp://registry.npmmirror.com三、单独安装node-sass//按照需要的node-sass版本进行安装,此处是node的版本......
  • Vue学习笔记之Node Sass version 8.0.0 is incompatible with 4.0.0错误
    输入以下两个命令:npmuninstallnode-sassnpmi-Dsass注:Mac环境如果进行了系统升级,需要重新安装Xcode,执行命令xcode-selectinstall不然会出现如下的错误Mac解决gyp:NoXcodeorCLTversiondetected!报错 如果出现python2的错误gypverb`which`failedE......
  • node和sass版本不匹配问题
     解决办法:使用npminstall--legacy-peer-deps进行安装。比如下图: ......
  • SASS界面编译工具——Koala的使用
    《SASS界面编译工具——Codekit的使用》一文中图解了"CodeKit"图形工具编译SASS项目。由于CodeKit是一款付费工具,而且只能在Mac中使用,因此国内众多SASS爱好者,或者初学者也就无法体验CodeKit工具编译SASS项目。幸运的是,有一款国产图形工具Koala和CodeKit功能极其类似,支持多个平台......
  • bug|初始化项目|sass-loader报错:TypeError: this.getResolve is not a function at Ob
    Modulebuildfailed:TypeError:this.getResolveisnotafunctionatObject.loader的解决npmuninstallsass-loader(卸载当前版本)[email protected]......
  • 15-Sass入门
    title:15-Sass入门publish:trueSass简介大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量、不可以引用等等。面对这些问题,我们现在来引入Sass,简单的说,他是css的升级版,可以自定义变量,可以有if语句,还可以嵌套等等,很神奇吧!那下面......