angular - 使用 ng test Angular 4 Karma-Jasmine 显示没有 css 的问题

Question

运行命令 ng test 时出现显示问题。看来我不再有 css 效果了。这是两张图片，一张来自ng 服务，另一张来自ng 测试

这是正常行为吗？我应该分享我项目中的特定文件吗？请发表评论。

Answer 1

这可能为时已晚，但可能对某人有所帮助。

转到您的karma.conf.js并添加此

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    files:[
      "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
     "src/styles.css",
    ],
     // more code below

在这个示例中，我添加了我的 styles.css 和一个来自 angular 材质的预构建主题。

如果您还需要任何帮助，请告诉我。

Answer 2

brijmcq提供了有关如何解决问题的深刻见解。我也一直在努力正确加载字体的 css（也加载字体文件），在我的情况下是材料图标：

css文件加载字体文件并在测试期间失败

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

这可以通过指示 Jasmine 也提供这些文件来克服：

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    files: [
      "node_modules/bootstrap/dist/css/bootstrap.css",
      "node_modules/material-design-icons/iconfont/material-icons.css",
      "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
      {
        pattern: 'node_modules/material-design-icons/iconfont/*',
        watched: false,
        included: false,
        served: true,
        nocache: false
      }
    ],