如何使用 Yeoman 覆盖 Zurb Foundation 中的默认设置？答案

【问题标题】：How can I overwrite default settings in Zurb Foundation using Yeoman?如何使用 Yeoman 覆盖 Zurb Foundation 中的默认设置？
【发布时间】：2013-01-28 01:08:41
【问题描述】：

我已使用 yeoman install foundation 将 Zurb Foundation 安装到我的 Yeoman 项目中，然后通过使用 require: 'zurb-foundation' 更新我的 Gruntfile.js 将其包含在我的项目中

现在当我尝试编辑我的app/styles/main.scss 文件时出现问题。我无法覆盖默认的 Zurb 基础 SASS 变量。

我尝试在主目录的app/components 和components 下编辑_settings.scss 文件 - 但无济于事。

有没有人运气好或有解决这个困境的办法？

【问题讨论】：

标签： zurb-foundation gruntjs yeoman

【解决方案1】：

我自己找到了答案。

关键是在你的覆盖之后放置一个!important 声明（基本的 CSS doh！），并将这个覆盖放在你自己的 main.scss 或等效文件中：

$mainColour: red!important

别忘了在你的 Gruntfile.js 中添加 require 语句：

compass: {
  dist: {
    options: {
      require: 'zurb-foundation',// ADD THIS LINE
      css_dir: 'temp/styles',
      sass_dir: 'app/styles',
      images_dir: 'app/images',
      javascripts_dir: 'temp/scripts',
      force: true
    }
  }
},

【讨论】：

【解决方案2】：

您是否尝试过使用来自 github 的 yeoman-foundation-generator？ https://github.com/pchen/yeoman-foundation-generator

这就像使用独立的 SASS 和 Foundation。您必须将 git repo 中的文件夹放入 NPM 安装中。

【讨论】：

是的，我看过了，但我现在还不想通过 github 编辑任何东西。我更愿意找到当前方法的解决方案。