在webpack 5中,是否有可能正确生成一个可注入shadow DOM的CSS bundle? 如果我尝试使用新的assets加载一些CSS,URL不会被转换,但我需要它们适应生成的bundle。 例如,我有一个如下所示的CSS文件:
/* src/components/header.css */
#logo {
background-image: url('./images/logo.png');
}
如果webpack可以对嵌入到shadow dom中的url进行url编码或替换,那将会很好。 如果我按照以下方式配置webpack:
...
module.rules: [{
test: /\.css$/,
oneOf: [
{
resourceQuery: /raw/, // import css from 'path/to/file.css?raw'
type: 'asset/source',
use: [
{loader: 'css-loader'}
]
},{
...
}
]
}]
...
加载的字符串不再是CSS,而是一些Webpack脚本。如果我在规则中删除
use
部分,CSS将被加载而不做更改。
是否有任何插件可以使CSS内联并将其作为字符串加载?