rollup 'rollup-plugin-postcss' 不要将 css 注入头部答案

【问题标题】：rollup 'rollup-plugin-postcss' dont inject css into headrollup 'rollup-plugin-postcss' 不要将 css 注入头部
【发布时间】：2019-10-29 16:34:47
【问题描述】：

我想创建一个 HTML Web 组件，我需要导入 CSS 文件，但我想将它注入到我的 shadow 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”不断将 css 注入到我的主 html 头中，我不知道如何阻止它

【问题讨论】：

标签： css web-component rollup

【解决方案1】：

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

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

您必须将其更改为：

postcss({
  inject:false
})

【讨论】：