Webpack 5中阴影DOM中的CSS

xeufq47z  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(160)

webpack 5是否有可能正确地生成一个bundle,并在shadow DOM中注入CSS?如果我尝试加载一些带有新资产的CSS,url不会被转换,但我需要调整它们以与生成的bundle集成。例如,我有一个CSS文件,如下所示:

/* src/components/header.css */
#logo {
  background-image: url('./images/logo.png');
}

如果webpack可以对url进行编码或者替换要嵌入到shadow dom中的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内联并将其作为字符串加载吗?

2vuwiymt

2vuwiymt1#

是的,您需要使用Webpack“样式加载器”插件和插入参数。

{
            loader: "style-loader",
            options: {
              injectType: "lazyStyleTag",
              insert: function insertIntoTarget(element, options) {
                var parent = options.target || document.head;
                parent.appendChild(element);
              },
            },
          },

有关详细信息,请参阅此部分。

相关问题