如何使用js更改sass文件中的变量

Posted 2023-05-04

参考技术A 好像不能直接引用.scss（和.sass一样，只是写法规范不同）文件，需要通过工具（软件或命令行）先进行编译生成.css文件后，再引入.css文件使用。本回答被提问者采纳

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

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

【英文标题】：how to watch changes in whole directory/folder containing many sass files

【发布时间】：2013-08-27 23:33:58

【问题描述】：

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

文件：

sass --watch style.scss:style.css

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

【问题讨论】：

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

【参考方案1】：

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

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

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

【讨论】：

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

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

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

【参考方案2】：

通过 piouPiouM 扩展答案：

除了以.css 结尾外，将创建与输入文件同名的输出文件。 <input folder> 和 <output folder> 可以相同。

两个文件夹都可以是当前的工作目录，所以以下是有效的：

$ sass --watch .:.

【参考方案3】：

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

 sass --watch .

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

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

希望对你有帮助。

【参考方案4】：

我最终在没有使用 Grunt 或 Sass-watch 的情况下执行此操作：

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

【讨论】：

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

@buschschwick：是的，您可以在系统级别安装它。您可以每次都输入完整的地址，就像您一样，或者更简单的是更改目录cd /Users/estout/Documents/GIT/project/，然后写$ sass --watch .:.

【参考方案5】：

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

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

【参考方案6】：

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

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

【讨论】：

当然现在node sass is deprecated。我在the npm page 上看不到任何与watch 等效的内容。它是 on the stand-alone version，但还不能 100% 确定如何在节点代码中使用，例如，有 no watch on its DefinitelyTyped definition。

【参考方案7】：

根据资料，可以使用下一个命令行：

sass --watch .

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

【讨论】：

他们为我工作，谢谢

【参考方案8】：

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

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

【讨论】：

@matsko 是的，这确实是 grunt watch 所做的

我最终这样做了：***.com/questions/18427849/…

你不会想要一个 SASS 文件用于我当前的项目。这是一个糟糕的建议/答案。更简单的是让 SASS 观看一个目录，其他人在他们的答案中已经说明了。

您可能想要一个项目的主 SASS 文件，其中包括所有子组件 SASS 文件（看看 bootstrap 是如何做到的）。当前接受的答案还有一个主要缺陷，即它编译 all sass 文件并为每个 sass 文件输出一个 css 文件（不包括部分文件）。那可能不是你想要的。

【参考方案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