Question

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

文件：

sass --watch style.scss:style.css

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

Answer 1

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

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

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

Answer 2

稍微扩大piouPiouM的答案：

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

$ sass --watch .:.

Answer 3

我最终没有使用Grunt或Sass-watch这样做：

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

Answer 4

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

 sass --watch .

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

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

我希望这可以帮到你。

Answer 5

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

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

Answer 6

您可以创建一个包含其余文件的sass文件，然后只需查看此文件。

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

Answer 7

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

sass --watch .

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

Answer 8

以防万一有人在2018年遇到这个问题：
sass网站是指Ruby Sass deprecated。和现在（2018年5月）如果您通过 npm 安装dart sass，它不支持--watch command

怎么做：
你需要安装node-sass globaly，例如：

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"
}

你需要做的就是再次保存它，它会正常工作！

Answer 9

您可以设置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

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

9 个答案: