使用指南针从 bootswatch 重新编译主题时出错

Question

我正在尝试使用指南针复制 bootswatch 的 css 文件，但我收到错误消息。我的罗盘文件夹：

<project>
   |_ css
   |  |_ styles.css
   |  |_ ..........
   |_ fonts
   |   |_ bootstrap
   |_ img
   |_ js
   |_ sass
      |_ bootstrap
      |   |_ mixins
      |   |_ _variables.scss
      |   |_ .........
      |_ themes
          |_ _cerulean-bootswatch.scss
          |_ _cerulean-variables.scss
      |_ _bootstrap.scss
      |_ _custom-variables.scss
      |_ styles.scss

Compass 使用最后一个文件 styles.scss 生成 styles.css。我创建了一个文件夹 themes 并在其中复制了 cerulean 文件：_cerulean-bootswatch.scss 和 _cerulean-variables.scss。我使用了所有 bootswatch 主题所在的 project 文件。

现在，我按照项目页面的说明进行操作：

SASS:

@import "bootswatch/theme/variables";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";
@import "bootswatch/theme/bootswatch";

根据我的结构，这些将是：

导入主题变量(_cerulean-variables.scss)
导入 bootstrap 部分 (_bootstrap.scss)
最后导入相关的bootswatch部分(_cerulean-bootswatch.scss)

以上所有发生在styles.scss:

// Import custom Bootstrap variables
// Bootswatch theme variables
//@import "themes/cerulean-variables"

// Import Bootstrap for Sass
@import "bootstrap";

// Bootswatch themes
@import "themes/cerulean-bootswatch"

如果我取消评论 /@import "themes/cerulean-variables" 我会收到错误消息：

error sass/styles.scss (Line 29: Invalid CSS after "...tstrap for Sass": expected selector or at-rule, was "@import "bootst...")

并且 styles.css 包含错误：

"Error: Invalid CSS after \"...tstrap for Sass\": expected selector or at-rule, was \"@import \"bootst...\"\A         on line 15 of bs-compass-simple/sass/styles.scss\A \A 10: // Bootswatch theme variables\A 11: @import \"themes/cerulean-variables\"\A 12: \A 13: \A 14: // Import Bootstrap for Sass\A 15: @import \"bootstrap\";\A 16: \A 17: // Bootswatch themes\A 18: @import \"themes/cerulean-bootswatch\"

我是不是漏掉了什么？

Answer 1

您漏掉了两个分号。应该是：

// Import custom Bootstrap variables
// Bootswatch theme variables
//@import "themes/cerulean-variables";

// Import Bootstrap for Sass
@import "bootstrap";

// Bootswatch themes
@import "themes/cerulean-bootswatch";

或者你可能需要：

// Import custom Bootstrap variables
// Bootswatch theme variables
//@import "themes/cerulean-variables"

// Import Bootstrap for Sass
@import "bootstrap"

// Bootswatch themes
@import "themes/cerulean-bootswatch"

如果 Compass 使用的语法与我习惯使用普通 SCSS 的语法不同，或者您将某些内容设置为非标准配置。无论哪种方式，用法都应该是一致的。我建议可能是前者，因为缺少分号会在浏览器尝试一起解析两行而不是单独解析时在 @import "bootstrap" 处导致错误。

使用指南针从 bootswatch 重新编译主题时出错

Error when recompiling themes from bootswatch using compass

compass-sass

compass

bootswatch