使用 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';

在项目未构建时它正在工作。但是当我构建它时（丑化/缩小）。它不工作。

项目建成前：

项目建成后：

我使用 yeoman 来构建项目。这是在“构建”上运行的任务：

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

其中一个必须以某种方式阻止 google 字体。

Answer 1

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

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

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