使用grunt构建项目时，Google字体无效

Question

我使用的是Google字体，我在.scss文件中声明：

@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap";
@import "../../bower_components/font-awesome/scss/font-awesome";
@import url(http://fonts.googleapis.com/css?family=Quicksand:400,300,700);
@import 'common';

当项目没有建成时，它正在工作。但是当我构建它时（uglify / minify）。它没有用。

在项目建成之前：

项目建成后：

我使用自耕农来schafold项目。这是在＆＃39; build＆＃39;：

上运行的任务

grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
  ]);

其中一个必须以某种方式制作谷歌字体。

Answer 1

当你的CSS文件被丑化并且@import url(http://fonts.googleapis.com/css?family=Quicksand:400,300,700);行与没有空格的前一行连接时会发生这种情况。

虽然不理想，但我发现为这些类型的导入创建单独的webfonts.scss文件可解决此问题（但会在您的应用中创建一个额外的css文件）

或者，您可以从webfonts file获取内容并将@font-face规则直接复制到样式表中，而不是使用@import。这似乎不容易出错。