rollup 'rollup-plugin-postcss' не вводит CSS в голову - PullRequest
0 голосов
/ 29 октября 2019

Я хочу создать веб-компонент HTML, и мне нужно импортировать файл CSS, но я хочу внедрить его в мою теневую оболочку. У меня есть код, подобный приведенному ниже:

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-голову, и я не знаю, как это остановить

1 Ответ

0 голосов
/ 29 октября 2019

просто сконфигурируйте ваш накопительный пакет, чтобы остановить стиль ввода в вашем модуле js:
конфигурация по умолчанию:

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

, вы должны изменить его на:

postcss({
  inject:false
})
...