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
how to watch changes in whole directory/folder containing many sass files
提问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 --watch
command
以防万一有人在 2018 年遇到这个问题:
sass 网站指的是已弃用的Ruby Sass。现在(2018 年 5 月)如果您通过npm安装 dart sass ,它不支持命令--watch
What to do:
you need to install node-sass
globaly , like:
怎么做:
您需要安装node-sass
globaly ,例如:
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 --watch
command 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插件