问题标签 [grunt-contrib-sass]

我正在 Grunt 任务中设置 SASS 源映射 (grunt-contrib-sass)。理想情况下，我所有项目的 CSS 都将合并到一个文件中，并使源映射与原始源保持一致。

我最初的想法是，将输出源保存在单独的文件中是最简单的，这样会很容易，因为映射是一对一的，每个 .scss 源文件都有一个 .css 输出文件。但这对于我们的其他项目来说并不是一个理想的解决方案，因为我们希望将 HTTP 请求保持在最低限度。

我可以看到如何组合我的源文件，并从中输出 SASS，作为一个输出文件，或者我可以在 SASS 导出它之后连接我的 .css 输出，但显然，在这些实现中的任何一个中映射都不正确。

似乎这必须是 grunt-contrib-sass 的一个功能，但我没有找到这样的功能。

我的 SASS 配置如下所示：

我尝试了文档中的样式选项，发现四个中只有两个，“压缩”和“扩展”实际上有效。“紧凑”和“嵌套”不起作用。我没有看到一个看起来特定于我需要的选项。

如何从 SASS 输出到单个 CSS 文件，并保持源映射真实到多个源文件？

我启用了 CSS 源映射，但 Google Chrome 的行为就像它们被禁用一样。在我查看的所有资源中，我需要做的就是在 DevTools 首选项中启用源映射。它在那里明确启用：

源地图位于我的 CCS 文件旁边，如下所示：

在 DevTools > Elements > Styles 中，只有 CSS 文件，没有 SCSS 或 SASS：

这是我在 Gruntfile.js 中的 grunt-contrib-sass 配置：

该站点通过grunt serveOSX 提供服务，源映射由 grunt-contrib-sass 生成。

真正奇怪的是，我有 99% 的把握在我第一次设置它之后就看到它正常工作一次。之后我什么都没改...

尝试调试此问题的下一步是什么？我是否应该能够查看 Chrome 是否正在向.map文件发出（失败？）请求？我错过了什么吗？

更新：我想我已经确定地图没有被加载，因为 sourceMappingURL 不存在于编译的 CSS 中。我为此开辟了一个新问题。

我正在使用一些 sass 编译器将我的 scss 文件转换为 css，但是在其中一个 scss 文件中，我从 node_modules 文件夹中导入了一些 css 文件，以及我的 src 文件夹中的其他 scss 文件。这些 css 导入作为 url 导入包含在生成的 css 文件中，而不是复制文件的内容，并且 scss 导入很好地作为内容复制过来。我无法将这些 css 文件重命名为 scss，因为它们位于节点模块中。任何解决方法？

我目前的 grunt watch 命令有问题。它似乎正在运行并正在侦听更改，但并未应用它们。我需要将我的 scss 更改为 css。我对这一切都很陌生，我正在遵循他们给我的每一步，但它不起作用。有人可以看看并帮助我吗？

我决定继续并添加 browsersync 任务，并显示我的文件 css 已更改但不是真的。

这是我的 gruntfile 的代码：

这是我的 package.json：

正在看，但不是什么都不做。我有windows10。pd：对不起我的英语。希望有人可以在这里发光。

我正在尝试运行 Grunt 和 SASS 来丑化和缩小 javascript、CSS 和 SCSS。我正在尝试在 RHEL8 AWS EC2 实例中运行 grunt 并安装了所需的依赖项：

节点JS：v10.24.1

NPM : 6.14.12

红宝石：红宝石 2.5.9p229（2021-04-05 修订版 67939）[x86_64-linux]

宝石：2.7.6.3

咕噜声：咕噜声-cli v1.4.3

SASS：1.35.2 用 dart2js 2.13.4 编译

但是，当我尝试运行 grunt 时，出现以下错误：

找不到名为“sourcemap”的选项。

用法： sass <input.scss> [output.css] sass <input.scss>:<output.css> ：

Grunt 似乎运行良好，但 SASS 似乎存在一些问题。这似乎在我的本地机器上运行良好。但是，我无法在 EC2 实例中运行 grunt。

这些是我用来下载依赖项的命令：

这是任何类型的依赖问题吗？有人可以帮忙吗？

我正在使用 Grunt 编译 SASS 并缩小 CSS (grunt-contrib-sass + grunt-contrib-cssmin)。我对每个项目都进行了相同的设置，而且它总是很完美，但最近我注意到 grunt-contrib-sass 在这个项目上输出了巨大的 CSS 文件（48Mb）。我已经对其进行了研究，无法找出它可能是什么，而且由于这个设置曾经有效，我不知道要寻找什么。在我的实际 SASS 中是否有任何东西可能会使编译的文件如此之大？

Gruntfile.js

包.json

我想做以下事情：我的网站上有一个颜色切换器，当用户点击一种颜色时，我想用 Javascript 将我网站上的文本颜色更改为点击的颜色。在我的 JS 代码中，我想通过将 CSS 根变量修改为单击颜色的十六进制数据集来实现这一点。

**我想强调我将 grunt 与 grunt-contrib-sass 插件一起使用。

这就是我的颜色变量在 _variables.scss 文件中的样子

我希望这些变量在我的 main.css 文件中显示为根变量。此时它们被转换为变量的颜色。

下面是一个例子：

我希望我的 main.css 文件看起来像这样：

非常感谢！