How to insert scss inside shadowRoot Web Components

[VelynnXV]

Is there an easy way to insert my scss file into my template.innerHTML?
The purpose being encapsulation of this specific style to be effective only for this component.

I am using "parcel-bundler": "^1.12.4"

How can I import the scss without it affecting the whole app + insert it into my web component template only?

I tried to place <link rel="stylesheet" href="../scss/animeCardStyle.scss"> inside the innerHTML of my template, without any results.

This is my component

// how do i include sass in template
import animeCardStyle from '../scss/animeCardStyle.scss';

const template = document.createElement('template');
template.innerHTML = `
    <div class="anime-card">
    <div>
        <img />
        <h3></h3>
        <div class="info">
            <p>
                <slot name="anime-description" >
            </p>
        </div>
    </div>
    </div>
`;

class AnimeCard extends HTMLElement{
    constructor(){
        super() // calling the constuctor of HTMLElement

        // ShadowDom
            //An important aspect of web components is encapsulation
            //being able to keep the markup structure, style, and behavior hidden and separate
            //from other code on the page so that different parts do not clash, and the code can 
            //be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to 
            //attach a hidden separated DOM to an element

        this.attachShadow({mode:'open'})
        this.shadowRoot.appendChild(template.content.cloneNode(true))
        this.shadowRoot.querySelector('h3').innerHTML = this.getAttribute('anime-title')
        this.shadowRoot.querySelector('img').src = this.getAttribute('avatar')
        this.shadowRoot.querySelector('img').width = "300"

    }

    // Custom element lifecycle methods

    // constructor() : Called when an instance of the element is created or upgraded
    // connectedCallback() : Called everytime an element is inserted in DOM -> useful for setting event listeners
    // disconnectedCallback() : Called everytime an element is removed from DOM
    // attributeChangedCallback(attrName,oldValue,newValue) : Called when an attribute is added, removed, upgraded or replaced.
    something() {
        
      }

    // connectedCallback() {
    //     this.shadowRoot.querySelector('#elem').addEventListener('click', () => this.something());
    //   }
    
    //   disconnectedCallback() {
    //     this.shadowRoot.querySelector('#elem').removeEventListener();
    //   }
}
window.customElements.define('anime-card',AnimeCard)


const animeCard = async () => {

    let response = await fetch('https://kitsu.io/api/edge/anime').then(function (res) {
        return res.json()
    });

    let animes = response
    console.log(animes.data)


    let template = "";

    for (let index = 0; index < animes.data.length; index++) {
        let anime = animes.data[index];

        let anime_img = '';
        if (anime.attributes.coverImage != null) {
            anime_img = anime.attributes.coverImage.original;
        }
        let anime_title = '';
        if (anime.attributes.coverImage != null) {
            anime_title = anime.attributes.canonicalTitle;
        }
        let anime_description = '';
        if (anime.attributes.coverImage != null) {
            anime_description = anime.attributes.description;
        }

        template += `
                <anime-card avatar="${anime_img}" anime-title="${anime_title}">
                    <div slot="anime-description">${anime_description}</div>
                </anime-card>           
            `

    }

    return template
}

export default animeCard

My package.json

{
  "name": "mypackage",
  "version": "1.0.0",
  "description": "This is my package",
  "main": "index.js",
  "scripts": {
    "dev": "npm run clean && parcel public/index.html --out-dir development -p 3000",
    "build": "rimraf ./dist && parcel build public/*.html --out-dir dist --public-url ./",
    "clean": "rimraf ./development && rimraf ./.cache"
  },
  "author": "me",
  "license": "UNLICENSED",
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/plugin-transform-runtime": "^7.12.15",
    "@babel/runtime-corejs2": "^7.12.13",
    "@babel/runtime-corejs3": "^7.12.13",
    "parcel-bundler": "^1.12.4",
    "sass": "^1.32.7",
    "sass-to-string": "^1.4.2"
  }
}