css加载器无法解析文件加载器生成的urls
css加载器无法解析文件加载器生成的urls
提问于 2018-06-13 01:43:19
我有共享组件npm包项目，其中公开了组件和css文件。Css文件是用webpack和url/ file -loader来解析字体的。我可以成功地构建这个项目，生成的css如下所示：
@font-face {
font-family: 'MyFont';
src: url(cf871bb3514694d3252ee1d23f71dd6c.woff2);
}问题是，当我试图从另一个项目使用这个css时，这个项目使用的是webpack和css-loader，并打开了css-modules (modules:true)，css-loader无法解析生成的url：
Module not found: Error: Can't resolve 'cf871bb3514694d3252ee1d23f71dd6c.woff2'如果我将url更改为：
url(./cf871bb3514694d3252ee1d23f71dd6c.woff2);然后它就起作用了。
另外，如果我设置了modules:false，那么即使没有./，一切也可以正常工作
所以看起来css-loader打开css-modules需要将url路径作为./的相对路径的节点，而不仅仅是文件名。
源文件中的url如下所示：
url('../assets/fonts/Myfont.woff2');有没有办法解决这个问题？
回答 1
Stack Overflow用户
发布于 2018-06-13 04:29:21
似乎你一般不能在webpack中禁用Node.js风格的解析。但是，您可以使用NormalModuleReplacementPlugin来干预模块请求，并像相对路径一样动态解析它们。
下面的webpack配置调整应该可以做到这一点：
const webpack = require('webpack')
const path = require('path')
module.exports = {
//...
plugins: [
// RegEx matches all requests neither starting with a dot nor a slash
new webpack.NormalModuleReplacementPlugin(/^[^./]/, resource => {
// Override the original request
resource.request = path.resolve(resource.context, resource.request)
})
]
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50822907
复制相关文章
相似问题