使用Grunt时无法在Bower组件中找到CSS文件

Question

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

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

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

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

我是否需要进行任何特殊设置才能将.css文件包含在构建中？

Answer 1

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

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

Answer 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 ）中，然后使用它。

Answer 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:

因人而异。 祝好运！