Javascript 如何在shadowRoot Web组件中插入SCS

有没有一种简单的方法可以将我的scss文件插入我的

模板.innerHTML

？ 其目的是封装此特定样式，使其仅对该组件有效

我正在使用

“包裹打包机”：“^1.12.4”

如何导入SCS而不影响整个应用程序+仅将其插入我的web组件模板？

我试图将

放在模板的innerHTML中，但没有任何结果

这是我的组件

//如何在模板中包含sass
从“../scss/animeCardStyle.scss”导入animeCardStyle；
const template=document.createElement（'template'）；
template.innerHTML=`
用于设置事件侦听器
//disconnectedCallback（）：每次从DOM中删除元素时调用
//attributeChangedCallback（attrName、oldValue、newValue）：在添加、删除、升级或替换属性时调用。
某物{
}
//connectedCallback（）{
//this.shadowRoot.querySelector（'#elem'）.addEventListener（'click'，（）=>this.something（））；
//   }
//disconnectedCallback（）{
//this.shadowRoot.querySelector（“#elem”）.removeEventListener（）；
//   }
}
window.customElements.define（'anime-card'，AnimeCard）
常量animeCard=async（）=>{
let response=等待取数（'https://kitsu.io/api/edge/anime）。然后（函数（res）{
return res.json（）
});
让动画=回应
console.log（animes.data）
让模板=”；
for（让index=0；index

mypackage.json

{
“名称”：“mypackage”，
“版本”：“1.0.0”，
“说明”：“这是我的包裹”，
“main”：“index.js”，
“脚本”：{
“dev”：“npm运行清理和包裹公共/index.html--out dir development-p3000”，
“build”：“rimraf./dist&&parcel build public/*.html--out dir dist--public url./”，
“清理”：“rimraf./development&&rimraf./.cache”
},
“作者”：“我”，
“许可证”：“未经许可证”，
“依赖性”：{
“@babel/core”：“^7.12.16”，
“@babel/plugin转换运行时”：“^7.12.15”，
“@babel/runtime-corejs2”：“^7.12.13”，
“@babel/runtime-corejs3”：“^7.12.13”，
“包裹捆扎机”：“^1.12.4”，
“sass”：“^1.32.7”，
“sass到字符串”：“^1.4.2”
}
}