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/popper.js@1.16.1/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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.