Question

我在Middleman（静态Ruby Web生成器）中使用我的网页

我安装了基础并正在工作。然后在我的styleshhets文件夹中，我有一个_settings文件，我应该覆盖基础的设置。

但不知怎的，它不起作用......

我的结构是：

web
 source
  bower_components
   foundation
    components
     _settings.scss
   ...
  images
  javascript
  layouts
  stylesheets
   ...
   _settings.scss
   ...

然后在stlesheets文件夹中的_settings.scss我要覆盖例如正文字体颜色为红色，如下所示：

// We use these to control various global styles
// $body-bg: $white;

 $body-font-color: red;

但是没有效果。

Config.rb：

# Change Compass configuration
 compass_config do |config|
  config.output_style = :compact
  config.add_import_path "bower_components/foundation/scss"
  config.http_path = "/"
  config.css_dir = "stylesheets"
  config.sass_dir = "stylesheets"
  config.images_dir = "images"
  config.javascripts_dir = "javascripts"
 end

 after_configuration do
  @bower_config = JSON.parse(IO.read("#{root}/.bowerrc"))
  sprockets.append_path File.join "#{root}", @bower_config["directory"]
end

我需要做什么才能通过我的stylesheets文件夹中的_settings.scss覆盖基础样式？

如果您需要查看整个结构，这是我在github上的网站：

https://github.com/GiorgioMartini/Giorgio-Web

Answer 1

只要在_settings.scss之前导入foundation.scss，就应该有效。

Answer 2

您的config.rb是正确的。但是，有一点要注意的是行

@import 'foundation';

将与行

区别对待

@import 'foundation.scss';

Compass首先会查看bower_components / foundation路径中是否有foundation.css文件。既然有，就会使用那个。此外，由于所有SASS变量都已在foundation.css中解析，因此事先导入_settings.scss将不会更改默认样式。相反，请确保app.scss文件的顶部如下所示：

@import 'foundation.scss';
@import 'settings';

因为默认情况下bower_components / foundation / _settings.scss已完全注释掉，所以它不会破坏新的样式。

覆盖在Middleman中不起作用的Foundation设置

2 个答案: