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

css CSS

斯丁ProJinJin

2020-03-18

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

文件:

sass --watch style.scss:style.css

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

第2091篇《如何在包含许多sass文件的整个目录/文件夹中监视更改》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
番长GreenL 2020.03.18

您可以创建一个包括其余文件的sass文件,然后仅观看此文件。

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

Jim蛋蛋 2020.03.18

根据信息,可以使用下一个命令行:

sass --watch .

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

路易十三 2020.03.18

万一有人在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"
}

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

路易凯 2020.03.18

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

F:\sass tutorial>sass --watch ./:./
小卤蛋梅 2020.03.18

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

 sass --watch .

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

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

希望对您有所帮助。

神奇阿良Jim 2020.03.18

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

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

piouPiouM扩展了答案:

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

    $ sass --watch .:.

村村Tony 2020.03.18

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android