我想创建一个 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,我不知道如何阻止它
最佳答案
只需配置您的汇总以停止在您的 js 模块中注入(inject)样式:
默认配置是:
postcss({
inject: { insertAt: 'top' }
})
您必须将其更改为:
postcss({
inject:false
})
关于css - 汇总 'rollup-plugin-postcss' 不要将 css 注入(inject)头部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58611758/