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

我有一个bootstrap.css文件，我想用style.sass中的自定义样式编译为单个输出文件，例如style.css。对于sass编译，我使用gruntjs和grunt-contrib-sass扩展。我社科院Gruntfile.js配置是这样的：使用gruntjs将css和sass文件编译为单个css文件

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*/

我甚至试着列出多个文件concatination和处理的顺序，就像在uglifier设置：

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

但这只会增加bootstrap.css到f中inal style.css文件忽略style.sass的存在。

由于我是gruntjs的新手，我无法弄清楚这应该如何正确完成。

来源

2014-10-30 Kamilius

你有没有尝试删除URL（），让你得到'@import “bootstrap.css;”'？我只进口 “.scss” 像这样-files：'@import “引导”;' – KnutSv 2014-10-30 13:38:26

@import URL（...）;是输出文件的CSS。问题是，SASS通过规则扩展了css默认导入功能，您可以在上面的参考资料中找到它们。 – Kamilius 2014-10-30 13:49:08

我看，如果你已经使用了'scss'格式化你可能只是改变了自举的格式'bootstrap.scss'与'@import进口的“引导”;'因为香草CSS是有效SCSS。基本上你有三个选择; 1.重写引导与SASS语法，2.变化SASS文件到SCSS语法或3单独地呈现SASS和经由另一咕噜分机与引导合并。 – KnutSv 2014-10-30 21:34:05

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

的SASS documentation状态：

默认情况下，它会寻找萨斯文件直接导入，但也有少数情况下才会编译成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与主样式表组合在一起。

这第一个选择是好的，如果你手动下载引导CSS文件到你的项目，但是，如果要包括它与NPM /亭子是不理想的依赖。

我会推荐第二个选项，因为从源代码构建Bootstrap不仅可以解决您的问题，还可以自定义Bootstrap变量以适应您的主题，而不会随后使用样式规则覆盖它们。唯一的缺点是你的构建过程可能会稍微长一点，因为Bootstrap源码的SASS构建比较大。

来源

2015-01-16 15:12:10 marnusw

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

回答

相关问题