如何在包含许多sass文件的整个目录/文件夹中监视更改

77

如何跟踪包含许多sass文件的整个目录中的更改？我正在使用以下命令来监视sass中的更改

文件：

sass --watch style.scss:style.css

但是如何在包含许多sass文件的整个目录/文件夹中监视更改。

— JA9
source

5

这里的任何答案对您有帮助吗？

— TheCarver 2015年

95

只需使用命令sass --watch <input folder>:<output folder>，如下所示：

$ ls -l
css/ sass/
$ sass --watch sass:css

其中<input folder>包含Sass文件，并<output folder>托管生成的CSS文件。

— ou
source

如果我有一个sass包含20个子目录的文件夹，其中总共有200个scss文件，sass --watch在这种情况下对CPU /内存资源有什么影响？

— WM

@piouPioum，我已经尝试过您提到的命令，它可以检测到更改，但是不写。

— Vivek

它说找不到名为“ watch”的选项。。我不知道该怎么办，我不敢相信如果不安装外部程序或使用任务运行器就无法运行观察器

— CristianTraìna17年

28

piouPiouM扩展了答案：

将以与输入文件相同的名称创建输出文件，但以结尾.css。
<input folder>并且<output folder>可以相同。
这两个文件夹都可以是当前的工作目录，因此以下内容有效：

$ sass --watch .:.

— 加里·罗伯逊
source

11

转到您的终端并转到您的文件夹，然后写道：

 sass --watch .

这将监视所有sass文件并转换为具有相同名称的css文件。你也可以这样：

sass --watch ~/user/youUser/workspace/project/styles/

希望对您有所帮助。

— 大卫·克鲁兹
source

10

我最终没有使用Grunt或Sass-watch来执行此操作：

npm install -g watch
watch "sass assets/app.scss assets/dist/app.css" assets/css

— 马茨科
source

1

您是否在工作的Web目录中安装sass？如果它是在系统级别安装的，是否必须键入整个路径？所以...sass --watch /Users/estout/Documents/GIT/project/:/Users/estout/Documents/GIT/project/

— erwstout 2015年

@buschschwick：是的，您将其安装在系统级别。您可以每次输入完整的地址（如您所愿），或者更简单的方法是更改目录cd /Users/estout/Documents/GIT/project/然后写入$ sass --watch .:.

— TheCarver 2015年

5

如果您位于当前文件夹中，请执行以下操作进行观看。

F:\sass tutorial>sass --watch ./:./

— 萨兰什·梅赫拉
source

3

万一有人在2018年遇到此问题，以防万一：
sass网站是指已弃用的 Ruby Sass。并且截至目前（2018年5月），如果您通过npm安装dart sass ，则不支持命令 --watch

做什么：
您需要安装node-sassglobaly，例如：

npm install node-sass -g

然后重新启动命令行，然后使用以下代码：

node-sass --watch scss/styles.scss css/styles.css

将Scass文件编译为CSS。
基本上node-sass支持--watch命令，我们使用它来将我们的scss代码编译为常规的css文件。

以防万一您在保存.scss文件时第一次遇到这样的错误：

{
  "status": 3,
  "message": "File to read not found or unreadable: yourdirectory/scss/styles.scss",
  "formatted": "Internal Error: File to read not found or unreadable: yourdirectory/scss/styles.scss\n"
}

您需要做的是再次保存它，它将正常工作！

— a_m_dev
source

2

您可以创建一个包含其他文件的sass文件，然后仅观看此文件。

或者，查看Grunt和非常好的grunt-contrib-compass插件

— 库玛哈什
source

@matsko是的，的确是这样grunt watch做的

— kumarharsh 2014年

最后我做这个：stackoverflow.com/questions/18427849/...

— matsko

您不希望我当前的项目使用一个SASS文件。这是一个糟糕的建议/答案。让SASS观看目录更为简单，其他人在回答中已经说明了该目录。

— TheCarver 2015年

2

您可能需要一个用于该项目的主SASS文件，其中包括所有子组件SASS文件（请查看引导程序的执行方式）。当前接受的答案还有一个很大的陷阱，它会编译所有sass文件并为每个sass文件输出一个css文件（不包括部分文件）。那可能不是您想要的。

— kumarharsh

2

根据信息，可以使用下一个命令行：

sass --watch .

资料来源：http : //sassbreak.com/watch-your-sass/#what-does---watch-do

— 莫伊斯·波蒂略
source

0

您可以设置sass来监视所有.scss文件（就我而言，我在src / static文件夹中有几个.scss文件）进行编译，但是在全局安装之前：

npm i -g sass

然后转到项目文件夹并在下面键入命令：

sass --watch $(pwd)/src/static

您也可以将其包装在package.json的npm脚本中，例如

 "scripts": {
    "sass:watch": "sass --watch $(pwd)/src/static"
    }

并通过以下命令运行它：

npm run sass:watch

— 阿尔特姆·费多托夫（Artem Fedotov）
source