Webpack:我必须在 publicPath 中为 url() 指令指定域才能在 CSS 中工作吗? [英] Webpack: Must i specify the domain in publicPath for url() directive to work in CSS?

问题描述

我的问题是，如果我没有在 output.publicPath 配置选项中指定完整的域；然后网址无法正确加载(至少是字体).

My problem is that if I don't specify the complete domain in output.publicPath config option; then the url don't load properly (at least fonts).

我的 webpack 配置:

My webpack config:

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'

我有一个 less 文件说明:

I have a less file that states:

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

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

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

When i check the generated CSS while debugging in chrome I see that it has been replaced by:

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

这似乎是正确的！但是不起作用 Chrome 开发工具报告错误:无法解码下载的字体:http://localhost:5000/widgets/damian/9789/en" 表示它试图加载该 url 的字体，但该 url 是我的当前位置，我在其中提供 html.而且我不知道为什么要尝试从该 url 中获取字体.

Which seems correct! But doesn't work Chrome dev tools report an error: "Failed to decode downloaded font: http://localhost:5000/widgets/damian/9789/en" Indicating that it tried to load a font that url, but that url is my current location, where i'm serving the html. And i don't know why is trying to fetch the font from that url.

如果我去:http://localhost:5000/资产/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot.它有效.

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

Everything is solved when I change the publicPath to: 'http://localhost:5000/assets/'. But that's something I want to avoid, and in any case i would like to understand why this happens.

我的猜测是，由于样式加载器将 CSS 添加为 Blob，该 css 失去了当前域"的概念，因此其中没有域的 url 表现得很奇怪.

My guess, is that since the style-loader, add the CSS as a Blob, that css losses the concept of 'current domain' so urls that don't have a domain in it, act strange.

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

But at the same time, this should be happening to everybody that uses webpack with CSS, and i haven't seen any comment about it. :S

谢谢！！！

推荐答案

找到了.感谢 webpack 的 gitter 上的 @diunarlist.

Found it. Thanks to @diunarlist on webpack's gitter.

这是因为我使用带有样式加载器的 sourceMap.检查 https://github.com/webpack/style-loader/issues/55

It's because i was using sourceMap with style-loader. Check https://github.com/webpack/style-loader/issues/55

对于源映射，样式加载器使用 Blob，因此它需要绝对 url 才能工作.

With source-maps, style loader uses a Blob, so it requires absolute urls to work.

没有 source-maps 它使用内联样式标签，所以没有问题.

Without source-maps it uses an inline style tag, so there is no problem.

这篇关于Webpack:我必须在 publicPath 中为 url() 指令指定域才能在 CSS 中工作吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！