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

Question

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

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

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和一个来自角度材质的预构建主题。

如果您仍需要任何帮助，请与我联系。

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
      }
    ],