0

我正在尝试使用 compass 重现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 主题所在的项目文件。

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

萨斯：

@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\"

我错过了什么吗？

4

1 回答 1

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" 出现错误。

于 2016-11-14T19:38:45.553 回答