使用gruntjs将css和sass文件编译为单个css文件

Question

我有一个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的新手，我不知道该如何正确地完成这项工作。

Answer 1

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

SASS文件规定：

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

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

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

你有三种选择来解决这个问题：

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

如果您手动将引导CSS文件下载到您的项目中，那么第一个选项是可以的，但是，如果您将其作为npm/bower的依赖项包括在内，则这并不理想。

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