如何用 gruntjs 预编译 sass？答案

【问题标题】：how to precompile sass with gruntjs?如何用 gruntjs 预编译 sass？
【发布时间】：2013-10-23 08:23:26
【问题描述】：

似乎有一些插件......我正在使用 webstorm 文件观察器，它也预编译单个文件。

我认为这可能不是设置观察者的最佳方式。

我现在正在运行这个命令：

sass --no-cache --update --stop-on-error --trace ./app/sass:./app/css

它似乎与 webstorm 文件监视冲突，它似乎将所有内容附加到 base.css。谁能告诉我这个命令与 webstorm 中的 sass filewatcher 相比到底在做什么？

使用 sass 的最佳方式是什么：

使用 grunt 构建任务将我的 sass 预编译为 css
并在开发过程中使用文件观察器？

我的 base.sass 看起来像这样：

@charset "UTF-8";

/* DO NOT EDIT FILES IN ./css. See ./sass instead */

@import "page";
@import "modal";
@import "nav";
@import "tables";
@import "forms";
@import "message";

【问题讨论】：

你的 gruntjs 文件在哪里？你用咕噜声做什么？如果你想转向 grunt，你可以做一些很酷的事情，如果你可以禁用 webstorm 中的 sass 文件观察器。我只在 Coffeescript、Sass 和 Bourbon 中使用 grunt....

标签： sass gruntjs webstorm

【解决方案1】：

您的命令只是将目录 ./app/sass 中的所有文件编译为 CSS，并将生成的文件放入 ./app/css。默认文件监视器运行以下命令：

sass --no-cache --update $FileName$:$FileNameWithoutExtension$.css

即它将当前文件（已更改的文件）作为输入，并在同一目录中创建一个 .css。但是，由于您启用了“仅跟踪根文件”选项（默认设置），因此观察程序仅为根文件创建 css - 通过导入引用其他文件的文件。您可以关闭此选项以更改当前行为并为其他文件生成 css。

【讨论】：