CSS 如何查看包含许多 sass 文件的整个目录/文件夹中的更改

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18427849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:05:44  来源:igfitidea点击:

how to watch changes in whole directory/folder containing many sass files

csssassbuild-processwatch

提问by JA9

How could I trace changes in whole directory containing many sass files ? I'm using the following command to watch changes in sass

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

file:

文件:

sass --watch style.scss:style.css

But how to watch changes in whole directory/folder containing many sass files.

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

回答by piouPiouM

Simply use the command sass --watch <input folder>:<output folder>, like this:

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

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

Where <input folder>contains the Sass files and <output folder>that hosts the generated CSS files.

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

回答by Gary Robertson

Expanding the answer by piouPiouM a little:

稍微扩展 piouPiouM 的答案:

  • Output files will be created with the same names as input files except ending with .css.
  • <input folder>and <output folder>can be the same.
  • Both folders can be the present working directory, so the following is valid:

    $ sass --watch .:.

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

    $ sass --watch .:.

回答by David.Cruz

Go to you terminal and get to you folder then wrote:

转到您的终端并进入您的文件夹,然后写道:

 sass --watch .

this will watch all sass files and convert to css files with the same name. also you can do it in this way:

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

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

I hope this can help you.

我希望这可以帮助你。

回答by matsko

I ended up doing this without using Grunt or Sass-watch:

我最终在没有使用 Grunt 或 Sass-watch 的情况下做到了这一点:

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

回答by saransh mehra

if you are in your current folder then do the following to watch it.

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

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

回答by Moises Portillo

According to the information, you can use the next command line:

根据资料,可以使用下一个命令行:

sass --watch .

Source: http://sassbreak.com/watch-your-sass/#what-does---watch-do

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

回答by a_m_dev

Just in case someone faces with this issue in 2018:
sass Website refers to Ruby Sassthat is been deprecated. and as now (May 2018) if you install dart sass via npm, it does not support --watchcommand

以防万一有人在 2018 年遇到这个问题:
sass 网站指的是已弃用的Ruby Sass。现在(2018 年 5 月)如果您通过npm安装 dart sass ,它不支持命令--watch

What to do:
you need to install node-sassglobaly , like:

怎么做:
您需要安装node-sassglobaly ,例如:

npm install node-sass -g

and then restart the command line , then use this code:

然后重新启动命令行,然后使用以下代码:

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

to compile your scass files to css.
basically node-sass supports --watchcommand and we use that to compile our scss codes to regular css files.

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

and just in case you get an error like this at the first time that you save your .scss file:

以防万一您在第一次保存 .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"
}

what you need to do is save it again, it will work correctly!

您需要做的是再次保存它,它会正常工作!

回答by kumarharsh

You can create one sass file which includes the rest of the files, and then just watch this file.

你可以创建一个包含其余文件的 sass 文件,然后只看这个文件。

Alternately, look into Gruntand the very good grunt-contrib-compassplugin

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