Eclipse插件可自动编译Sass文件

css CSS

Tony神乐

2020-03-24

我当前正在使用适用于Eclipse的Aptana插件,该插件使我的语法高亮显示,并允许我手动单击以将* .scss文件编译为* .css文件。我真正想做的是让它在每次保存时自动编译,但是我不知道该怎么做。

我知道您可以在命令行上使用sass --watch,但是我不想每次打开eclipse或创建新项目时都必须手动进行设置。

有没有人找到实现这一目标的好方法?每次保存时,是否必须有一种方法可以挂接到Aptana的Sass捆绑包中并运行其编译命令?这个问题的公认答案建议使用“程序生成器”-但这真的是最好的解决方案吗?如果是这样,是否有人有教程的提示/链接?

更新:我写了一篇有关如何使用ant脚本作为构建器的博客文章,但我仍在寻找更好的方法。

第3350篇《Eclipse插件可自动编译Sass文件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
村村卡卡西 2020.03.24

经过大量尝试,我发现Eclipse中最好的解决方案是使用--update sass功能定义一个简单的Builder:

  • 从项目菜单中选择“属性”,然后选择“构建器”部分。
  • 创建一个新的Builder,然后选择“程序”作为配置类型。
  • 选择启动配置的名称(SASS ?!)。
  • 将sass安装的路径插入“位置”字段。
  • 使用$ {project_loc}作为工作目录。
  • 在“参数”文本框中,插入要让sass使用的配置参数,最后,指定--update参数,然后指定sass文件目录源,然后指定“:”和已编译的css文件的目标文件夹。在我的配置中,“ resources”是包含.scss文件的源文件夹,“ web”是包含已编译.css文件的目标目录。--update命令将检查源文件夹和所有子文件夹中的修改。屏幕截图
  • 在“构建选项”选项卡中,只需选中“运行构建器:”部分下的所有选项。您也可以“指定相关资源的工作集”以仅在保存选定文件夹中包含的文件时启动构建器。屏幕截图
  • 单击确定保存您的启动配置。
  • 现在尝试修改源目录中的.scss文件,然后将其保存,您将在控制台窗口中看到sass CLI输出。

sass CLI将自动检查源文件夹(在我的配置中为资源)内已修改的资源,并将其编译到目标文件夹(在我的配置中为web)。同样,@ import修改后的资源的所有.sass文件都将被编译。

2020.03.24

watchsass comiler 有一个开关。
每当源(scss,sass)更改时,该函数都会重建输出(css)文件。

Quoting from : http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

Using Sass

Sass can be used in three ways: as a command-line tool, as a standalone Ruby module, and as a plugin for any Rack-enabled framework, including Ruby on Rails and Merb. The first step for all of these is to install the Sass gem:

gem install sass If you’re using Windows, you may need to install Ruby first.

To run Sass from the command line, just use

sass input.scss output.css You can also tell Sass to watch the file and update the CSS every time the Sass file changes:

sass --watch input.scss:output.css If you have a directory with many Sass files,
you can also tell Sass to watch the entire directory:

sass --watch app/sass:public/stylesheets Use sass --help for full documentation.

在Ruby代码中使用Sass非常简单。安装Sass gem之后,您可以通过运行require“ sass”并使用Sass :: Engine来使用它,如下所示:

engine = Sass :: Engine.new(“#main {background-color:#0000ff}”,:syntax =>:scss)engine.render#=>“ #main {background-color:#0000ff;} \ n”

伽罗理查德 2020.03.24

有更简单的解决方案。只需按照说明从以下位置安装SASS:

http://sass-lang.com/install

您会注意到,首先您必须安装Ruby。之后,只需转到SCSS / CSS文件所在的文件夹,启动CMD并运行此DOS命令:

>cd <path-to-your-css-files>
>sass --watch .

然后,您要做的就是链接您的SCSS文件,以使其被Eclipse识别为本地CSS文件。请遵循以下解决方案:

https://stackoverflow.com/a/12322531/4180447

希望这可以帮助。

注意:我可能错过了一两个步骤。这是我完成安装后记得的内容。如果您遇到任何问题,请发表评论,我会尽力帮助您。

塔雷克

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android