2

我有一个 bootstrap.css 文件，我想用我的自定义样式从 style.sass 编译成单个输出文件，例如 - style.css。对于 sass 编译，我使用带有 grunt-contrib-sass 扩展的 gruntjs。我的 sass 的 Gruntfile.js 配置如下所示：

sass: {
    dist: {
        options: {
            //style: 'compressed',
            style: 'expanded',
            lineNumbers: true
        },
        files: {
            'build/styles/style.css': 'src/styles/style.sass'
        }
    }
}

我试图将 bootstrap.css 导入 sass 文件，但它只在输出 css 中生成下一个代码（这是正确的行为http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import）：

@import url(bootstrap.css);

.....
/*my style.sass rules*/

我什至尝试按照连接和处理的顺序列出多个文件，例如在 uglifier 设置中：

files: {
    'build/styles/style.css': ['src/styles/bootstrap.css', 'src/styles/style.sass']
}

但这只会将 bootstrap.css 添加到最终 style.css 文件中，而忽略 style.sass 的存在。

由于我是 gruntjs 的新手，所以我不知道应该如何正确完成。

4

1 回答 1

0

Grunt 配置是正确的。您的文件没有被导入的原因是因为 SASS 的工作方式。

SASS 文档指出：

默认情况下，它会查找要直接导入的 Sass 文件，但在某些情况下，它会编译为 CSS @import 规则：

  • 如果文件的扩展名是 .css。
  • 如果文件名以 http:// 开头。
  • 如果文件名是 url()。
  • 如果@import 有任何媒体查询。

由于您要导入的文件具有.css扩展名，因此不会直接导入，但仍是标准 CSS @import。

您可以通过三个选项来解决此问题：

  1. 将包含的文件重命名为_bootstrap.scss. （如果您不添加下划线 abootstrap.css将与您的主输出文件一起创建，这是不必要的。）
  2. 将Bootstrap SCSS 源作为项目的依赖项包含在内，并以此为基础进行构建。通过键入项目根文件夹，使用 Bower安装Bootstrap 源。$ bower install bootstrap-sass-official（有关设置 Bower 的说明，请参阅Bower 网站。）然后您可以将上面的导入替换为@import 'bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';.
  3. 在构建过程中使用连接库（例如grunt-contrib-concat）来组合您的主样式表。Bootstrap.css

如果您手动将引导 CSS 文件下载到项目中，则第一个选项很好，但是，如果您将其作为依赖项包含在 npm/bower 中，则它并不理想。

我会推荐第二个选项，因为从源代码构建 Bootstrap 不仅可以解决您的问题，而且还允许自定义 Bootstrap 变量以适合您的主题，而不是用后续的样式规则覆盖它们。唯一的缺点是，由于 Bootstrap 源的 SASS 构建相当大，您的构建过程可能会稍长一些。

于 2015-01-16T15:12:10.560 回答