问题标签 [grunt-contrib-sass]

我有一个 bootstrap.css 文件，我想用我的自定义样式从 style.sass 编译成单个输出文件，例如 - style.css。对于 sass 编译，我使用带有 grunt-contrib-sass 扩展的 gruntjs。我的 sass 的 Gruntfile.js 配置如下所示：

我试图将 bootstrap.css 导入 sass 文件，但它只在输出 css 中生成下一个代码（这是正确的行为http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import）：

我什至尝试按照连接和处理的顺序列出多个文件，例如在 uglifier 设置中：

但这只会将 bootstrap.css 添加到最终 style.css 文件中，而忽略 style.sass 的存在。

由于我是 gruntjs 的新手，所以我不知道应该如何正确完成。

在使用 Grunt-contrib-sass 编译之前，是否可以在 GruntFile.js 中指定 SASS 中的变量？

例如，如果 CSS 中需要绝对路径，则该路径可以由 Gruntfile 基于 dev 构建或 deploy 构建来定义。

对于那些熟悉 LESS ( https://github.com/gruntjs/grunt-contrib-less ) 的人来说，这将是一个相当于 LESS' 的 SASS modifyVars。

示例 GruntFile

示例 SASS

出于某种原因，grunt-contrib-sass 会生成一个组合.css文件而不是多个.css文件。但这仅在我定义ext选项时发生。

文件结构：

app/ assets/ stylesheets/ application.web.scss application.mobile.scss application.tablet.scss public/ assets/

Gruntfile.js 配置

sass: { default: { options: { compass: false, noCache: true, style: 'expanded' }, files: [{ expand: true, src: 'application.**.scss', dest: 'public/assets', cwd: 'app/assets/stylesheets', ext: '.css' }] } }

上述配置生成以下内容：

app/ assets/ stylesheets/ application.web.scss application.mobile.scss application.tablet.scss public/ assets/ application.css

如果我完全删除该ext选项，它会生成：

app/ assets/ stylesheets/ application.web.scss application.mobile.scss application.tablet.scss public/ assets/ application.web.scss application.mobile.scss application.tablet.scss

我希望它生成的是：

app/ assets/ stylesheets/ application.web.scss application.mobile.scss application.tablet.scss public/ assets/ application.web.css application.mobile.css application.tablet.css

我知道我可能忽略了一个非常基本的事情，但我似乎无法终生解决这个问题 XD 所以关于我做错了什么有什么想法吗？

我正在使用 Grunt-Contrib-Sass，但我似乎无法在任何地方找到 config.rb 文件（如果它正在创建一个）。我需要它来为 http_fonts_path 分配一个路径，因为我正在使用 Compass 字体-face mixin，它似乎正在返回字体路径“./fonts”

这是混合代码：

现在这是我得到的警告：

不用说在css文件中的输出和warning是一样的，不是我原来放在sass文件中的mixin。

但是，当我使用没有“..”的路径时，它可以正常工作，并且不会将“./fonts”添加到url。

但是，这不是我想要在我的 CSS 文件中生成的 url。

我正在尝试使用 gruntjs 运行一个基本应用程序。一切正常，但是一旦我尝试运行与 sass 相关的 grunt 任务，就会出现以下错误：

我已经安装了 Ruby 和 Sass 以及 Nodejs。这是我的 Gruntfile.js：

Ruby 和 Sass 版本：

Ruby Path 已经在我的 PATH 变量中。

在我的项目中，我终于摆脱了指南针，而是使用了 autoprefixer。我需要一个新的 css 编译器，所以我使用了默认的 grunt-contrib-sass 模块。这些是我的设置：

但它只输出一个 sourcemap url。文件的路径是正确的。在 app.scss 中，我导入了我所有的 sass 文件/模块。

大家好，

我的项目中有很多结构非常复杂的 css 文件，因此我不得不在项目的根目录复制包含 css 文件的文件夹的结构。所以每次我保存一个 scss 文件时，grunt 必须检查我给他的每 160 多行配置。有没有办法优化这个配置？也许可以选择告诉 contrib-sass 用他所在的相同结构编译 scss 文件？

这是我的代码的简化示例：

谢谢！

大家好，

按照这个问题：https ://github.com/gruntjs/grunt-contrib-sass/issues/190

我正在尝试根据“src ”选项指定“dest”选项。唯一的区别是/scss必须被删除。

这是我当前代码的示例：

我试过了

但显然Warning: Arguments to path.join must be strings Use --force to continue.

谢谢！

Grunt-contrib-less 有一个选项paths，允许您使用 @import 指令指定要扫描的目录。这是 grunt-contrib-less 文档页面上的选项。

是否有与 grunt-contrib-sass 等价的东西？我看了一点，但找不到任何东西。

我正在使用带有下划线的模块化 SASS（这是一个 WordPress 框架，但在这里并不真正相关）。它与您在 bootstrap less 或 sass 中看到的非常相似，其中您有一个包含大量 @import 语句的简单文件。

我的问题是，当我在核心 style.scss 上运行我的 grunt 任务 (grunt-contrib-sass) 时，我收到一个错误，指出 sass/layout/_reset.scss 的第 32 行中的未定义变量：“$color__background-body”。但我确实在第一个@import 中定义了该变量。我修复了那个，然后它只是下一个变量有问题，所以它看不到我的变量。

过去，我在使用 Koala 编译器的无引导程序时遇到了同样的问题，最终没有使用变量。但我想解决这个问题，所以如果你们中的任何人有任何想法，我很想听听他们的意见！

您可以在此处找到文件和结构：

https://github.com/shellwe/Great-Plains-Landscaping-WP/tree/master/sass

另外，我知道一个解决方法可能是将我的所有变量都放在我的 style.scss 中，而不是放在 @import 语句中，但如果可能的话，我想保持模块化的感觉。

谢谢！