css - 汇总 'rollup-plugin-postcss' 不要将 css 注入(inject)头部

Question

我想创建一个 HTML 网络组件，我需要导入 CSS 文件，但我想将它注入(inject)到我的影子 dom 中。我有一些代码如下:

import introHTML from './Intro.html';
import introCss from './Intro.css';
class IntroWebComponent extends HTMLElement{

constructor(){
    super();
    this.defineClassProp();
}
defineClassProp(){
    this._shadowRoot = this.attachShadow({ mode: 'open' });
    this._html = introHTML
    this._element = document.createElement('template');
    this._element.innerHTML = this._html;
    this._element.append(`<style>${introCss}</style>`)
    this._shadowRoot.appendChild(this._element.content.cloneNode(true));
}

}
window.customElements.define('index-intro', IntroWebComponent);

但是“rollup-plugin-postcss”一直在向我的主 html 头注入(inject) css，我不知道如何阻止它

Answer 1

只需配置您的汇总以停止在您的 js 模块中注入(inject)样式:
默认配置是:

postcss({
    inject: { insertAt: 'top' }
})

您必须将其更改为:

postcss({
  inject:false
})