2

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

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

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

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

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

4

3 回答 3

1

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

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

于 2013-10-15T09:56:57.603 回答
0

卡利尔说了什么；但我建议使用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) 并使用它。

于 2013-10-15T20:07:28.837 回答
0

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

@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。祝你好运！

于 2013-11-12T20:41:23.133 回答