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.

Improve this question
2

2 Answers 2

Reset to default
2

Try to use

import '@lwc/synthetic-shadow';

in your index.js

Improve this answer
2
  • 1
    How does this answer the question asked here?
    – Adrian Larson ♦
    Commented Mar 1, 2021 at 16:35
  • @AdrianLarson it switches on synthetic-shadow and provides the ability to use bootstrap css
    – Mykhailo Savchenko
    Commented 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.

Improve this answer

You must log in to answer this question.

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