使用 Grunt 时在 Bower 组件中找不到 CSS 文件答案

【问题标题】：Cannot find CSS files in Bower Components when using Grunt使用 Grunt 时在 Bower 组件中找不到 CSS 文件
【发布时间】：2013-10-22 20:37:05
【问题描述】：

我正在尝试将 CSS 样式表从组件导入 .sass 文件。在这个例子中，组件是 bootstrap-select 并且导入看起来像这样：

@import 'bootstrap-select/bootstrap-select.css'

这构建成功但浏览器找不到文件，我在浏览器中收到以下错误：

GET http://localhost:9000/styles/bootstrap-select/bootstrap-select.css 404 (Not Found)

我需要设置什么特殊的东西才能在构建中包含 .css 文件吗？

【问题讨论】：

标签： css backbone.js sass gruntjs bower

【解决方案1】：

为了将文件的代码导入到您的 Sass 文件中，导入的文件需要有一个 .sass 或 .scss 结尾。如果文件以.css 结尾，则代码不会被吸入，它只是一个创建 HTTP 请求的普通 CSS @import 语句。

只需复制您要导入的css文件，将文件结尾更改为.scss和@import该文件。然后 Sass 将吸收代码并在您的 CSS 文件中用它替换 @import 语句。

【讨论】：

感谢您的建议，我已经将其作为临时解决方法执行，但它违背了使用 Bower 组件的目的。理想情况下，您希望无需任何手动操作即可安装或更新 Bower 组件。
确实如此，但是您不能通过 @import 将 CSS 代码导入 Sass 的事实只是意味着您需要一个可以通过 Bower 获得的 Sass 版本的 bootstrap-select。如果没有可用的 Sass 版本，则无法通过 Bower 管理该库。

【解决方案2】：

卡利尔所说的；但我建议改用bootstrap-sass，因为它在您可以/不可以包含的内容方面为您提供了更多的灵活性。我在生产中使用它，它非常好；您可以完全定制您的构建，包括变量，以便您可以调整按钮颜色、间距等。例如：

/*
|---------------------------------------------------------------------
| Only include the parts of Bootstrap that we are actually using.
|---------------------------------------------------------------------
*/

$navbar-margin-bottom: 0;

@import "../vendor/bootstrap-sass/lib/variables";
@import "../vendor/bootstrap-sass/lib/mixins";
@import "../vendor/bootstrap-sass/lib/normalize";
@import "../vendor/bootstrap-sass/lib/print";
@import "../vendor/bootstrap-sass/lib/scaffolding";
@import "../vendor/bootstrap-sass/lib/type";

// etc

将其添加到您的 bower.json (bootstrap-sass) 并改用它。

【讨论】：

感谢 Ben 的建议，我已经在使用 sass-bootstrap 但对于其他尚未准备好 sass 的 bower 组件（即 bootstrap-select），解决方案似乎是手动调整。跨度>
对不起，我认为 select 是 twbs 的一部分，我的错。 RE：手动调节；看起来，是的。如果您正在对您认为对其他人有益的源代码进行调整，请向原始存储库提交拉取请求。这将使其他正在寻找该组件的 SASS 版本的人受益，而且如果要更新它，所有未来的版本都将直接从 Bower 包中准备好 SASS。另一种方法是可能使用grunt-contrib-copy 之类的东西并将扩展名重命名为CSS，将文件放在不同的目录中。 :)

【解决方案3】：

有一个 ruby gem 可以实现称为sass-css-importer 的功能，它允许使用以下语法在.scss 文件中包含以.css 结尾的文件：

@import "CSS:../../bower_components/alertify/themes/alertify.core";
@import "CSS:../../bower_components/alertify/themes/alertify.default";
@import "CSS:../../bower_components/normalize-css/normalize";
@import "../../../bower_components/bourbon/app/assets/stylesheets/_bourbon";
@import "../../../bower_components/neat/app/assets/stylesheets/_neat";

它可以像这样添加到Gemfile：

source "http://rubygems.org"
gem "sass-css-importer"

并且需要在Gruntfile:

sass:
  options:
    quiet: true
    require: 'sass-css-importer'
  static:
    files: [
      expand: true
      cwd: 'source/styles'
      src: ['*.scss']
      dest: 'build/styles'
      ext:

YMMV。祝你好运！

【讨论】：