使用指南针从 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";

按照我的结构，这些将是：

1. 导入主题变量 (_cerulean-variables.scss)
2. 导入部分引导程序 (_bootstrap.scss)
3. 最后导入相关的 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 使用的语法与我使用 vanilla SCSS 的语法不同，或者您将某些内容设置为非标准配置。无论哪种方式使用都应该是一致的。我建议可能是前者，因为当浏览器尝试同时解析两行而不是单独解析时，缺少分号会导致 @import "bootstrap" 出现错误。