2

I am currently exploring Open Source LWC and in my index.html I have below tags to use bootstrap

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>

now if I use

<div class="p-4"></div>

this works as expected in index.html but if I use the same div in my app.html then it doesn't work, could someone please help me to understand if we need to do something in LWC component to use third party CSS referenced in index.html.

2

2 Answers 2

2

Try to use

import '@lwc/synthetic-shadow';

in your index.js

2
  • 1
    How does this answer the question asked here?
    – Adrian Larson
    Mar 1, 2021 at 16:35
  • @AdrianLarson it switches on synthetic-shadow and provides the ability to use bootstrap css Mar 10, 2021 at 8:24
0

Temporarily solved this issue as mentioned in this thread

but if anyone has any better solution, then please do post the same here.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .