Question

我有一个bootstrap.css文件，我想用style.sass中的自定义样式编译成单个输出文件，例如 - style.css。对于sass编译，我使用gruntjs和grunt-contrib-sass扩展。我的用于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 documentation州：

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


如果文件的扩展名为.css。

如果文件名以http：//。
开头
如果文件名是url（）。

如果@import有任何媒体查询。

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

您有三种方法可以解决此问题：

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

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

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

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

1 个答案: