相关疑难解决方法(0)

我有这个问题.Chrome继续返回此错误

资源解释为样式表,但使用MIME类型text/html进行传输

受此错误影响的文件只是Style,selected和jquery-gentleselect(以相同方式在索引中导入的其他CSS文件运行良好且没有错误).我已经检查了我的MIME类型,text/css已经在CSS上了.

老实说,我想从理解问题开始(这似乎是我不能单独做的事情).

我的问题是,如果我没有在output.publicPath配置选项中指定完整的域; 那么网址没有正确加载(至少字体).

我的webpack配置:

output: {
  ...
  publicPath: '/assets/'
},
module: { 
  loaders: {
    { 
      test: /\.less$/, 
      loader: "style!css?sourceMap!less?sourceMap" 
    },
    { 
      test: /\.(png|jpg|svg|gif|eot|woff|ttf)$/, 
      loader: 'file-loader?name=[path][name]-[hash].[ext]'
    }
  }
},
debug: true,
devtool: 'eval'

我有一个较少的文件说:

@font-face {
  font-family: 'new-sources';
  src: url('../../fonts/sources-icons-rev-4.eot');
  ...
}

我的服务器位于http:// localhost:5000.

当我在chrome中调试时检查生成的CSS时,我发现它已被替换为:

@font-face {
  font-family: 'new-sources';
  src: url(/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot);
  ...
}

这似乎是正确的!但无法正常工作Chrome dev工具报告错误:"无法解码下载的字体:http:// localhost:5000/widgets/damian/9789/en "表示它试图加载一个url的字体,但该url是我目前的位置,我在哪里提供HTML.我不知道为什么要尝试从该网址获取字体.

如果我去:http:// localhost:5000/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot.有用.

当我将publicPath更改为:' http:// localhost:5000/assets / ' 时,一切都解决了.但这是我想要避免的,无论如何我想了解为什么会发生这种情况.

我的猜测是,自从样式加载器,将CSS添加为Blob后,css会丢失"当前域"的概念,因此其中没有域的域名,行为奇怪.

但与此同时,这应该发生在每个使用CSS的webpack的人身上,我还没有看到任何关于它的评论.:S

谢谢!!!

我在后端使用Hapi,在前端使用React.我的webpack配置指定以下内容:

module: {
  loaders: [
    { test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader?name=public/ozregular.otf'}
  ]
},

CSS:

@font-face {
  font-family: OzRegular;
  src: url(/ozregular.otf) format("opentype");
}

该字体在Safari中有效但在Chrome中我遇到以下错误:

在Firefox中我得到这些错误:

我已经尝试了以下stackoverflow问题的答案但它似乎没有工作:Webpack"OTS解析错误"加载字体

有没有人有任何想法如何让字体在Chrome和Firefox中运行？