rollup 'rollup-plugin-postcss‘不要将css注入head

Question

我想创建一个HTML web组件，我需要导入CSS文件，但我想将其注入到我的卷影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头上注入css，我不知道如何阻止它

Answer 1

只需将汇总配置为停止js模块中的注入样式：

默认配置为：

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

您必须将其更改为：

postcss({
  inject:false
})