Custom Visual- CSS is not getting applied to the visual from the visual.less

Question

---visual.less---@import (less) "node_modules/bootstrap/dist/css/bootstrap.css";.mainContainer{width: 1130px !important;height: 600px;display: flex;flex-direction: column;.bones{&nbsp; flex-basis: 50%;&nbsp; .ribCage{&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; .rib{&nbsp; &nbsp; &nbsp; flex-wrap: nowrap;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; &nbsp; align-items: stretch;&nbsp; &nbsp; &nbsp; .connector{&nbsp; &nbsp; &nbsp; &nbsp; border-left: 2px solid rebeccapurple;&nbsp; &nbsp; &nbsp; &nbsp; align-self: stretch;&nbsp; &nbsp; &nbsp; &nbsp; flex-grow: 1;&nbsp; &nbsp; &nbsp; &nbsp; margin-left: 50%;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .boneEnd{&nbsp; &nbsp; &nbsp; &nbsp; height: 65px!important;&nbsp; &nbsp; &nbsp; &nbsp; padding-top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 10px;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0 1px;&nbsp; &nbsp; &nbsp; &nbsp; position:relative;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; &nbsp; &nbsp; text-align: left;&nbsp; &nbsp; &nbsp; &nbsp; &gt;a.moveUp:hover{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(-10px);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &gt;a.moveDown:hover{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(10px);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &gt;div{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: max-content;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 150%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px dashed;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: unset;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: unset;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: transform 0.2s;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;section{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-wrap: nowrap;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-left: 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .singleLineName{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow-x: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; white-space: nowrap;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-overflow: ellipsis;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .doubleLineName{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: -webkit-box;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-line-clamp: 2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-box-orient: vertical;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;div{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-grow: 2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;caption{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-grow: 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow-x: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; white-space: nowrap;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-overflow: ellipsis;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 600;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min-width: 120px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;.tag{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; white-space:nowrap;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-overflow:ellipsis;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;i{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: -15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: -14px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }}&gt;.spine{&nbsp; flex-basis: 5px;&nbsp; border-radius: 5px;&nbsp; flex-shrink: 0;&nbsp; flex-grow: 0;&nbsp; background-color: #02203E;}}.finalBlock{width: 70px;height: 70px;align-self: flex-end;background: #D9EC27;border-radius: 50%;text-align: center;line-height: 70px;font-weight: 600;}.date_line{text-decoration: underline;}.border_right{margin-top: 10px;margin-bottom: 10px;}.fix_padding{margin-left: 0px !important;margin-right: 0px !important;}.no_padding{padding-left: 0px !important;padding-right: 0px !important;}.no_border{height: 140px;margin-top: 10px;}.finalBlockText{font-size: 12px;margin-right: 5px;padding-top: 35px;text-align: right;}.fishBoneEditor{width: 100%;display: flex;flex-direction: row;flex-wrap: nowrap;background: #e5e5e5;&gt;div{&nbsp; flex-basis: 25%;&nbsp; padding: 10px;&nbsp; &gt;div{&nbsp; &nbsp; display: inherit;&nbsp; &nbsp; &gt;i{&nbsp; &nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; &nbsp; margin-left: 5px;&nbsp; &nbsp; }&nbsp; }}}.customer_title{font-size: 24px;font-weight: bold;padding-top: 0px;display: block;margin-bottom: 10px;}.oppurtunity_title{padding-bottom: 15px;font-size: 16px;font-weight: bold;color: #9A50F8;padding-top: 0px;display: block;}.dropdownContainer{margin-top: 10px;}.midway_link, .midway_link:hover{color: black;text-decoration: none;}&nbsp;----HTML from component.tsx---render() {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id="deleteme" style={{ overflow: "auto" }}&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="mainContainer"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ marginLeft: 1 + "%" }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div className="bones"&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div className="ribCage" style={{ alignItems: "end" }}&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {FishboneDiagramComponent.topBones.map((element) =&gt; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return &lt;&gt;{this.renderTopBone(element)}&lt;/&gt;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ width: this.calcTimelineWidth() + "px" }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="spine"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div className="bones"&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="ribCage"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alignItems: "start",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: "relative",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: this.calulateBottomBonePadding(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {FishboneDiagramComponent.bottomBones.map((element, index) =&gt; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return &lt;&gt;{this.renderBottomBone(element)}&lt;/&gt;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp;

dm-p · Accepted Answer

Hi&nbsp;Anonymous,
Are you importing visual.less in your visual.ts&nbsp;or any other file that's part of your build path? If this is not referenced, then webpack will not include it in the package that gets served to the developer visual.
If you have done this, you can also check the visual.css file hosted at&nbsp;https://localhost:8080/assets/&nbsp;to confirm that the contents have been included in the build, e.g.:

The other possibility is that if you're importing bootstrap via less, it can sometimes not compile. If so, import bootstrap.css in your visual.ts (I usually place it underneath the visual.less import).
Hopefully this gives you a couple of avenues to try.
Daniel

Forum Discussion

Custom Visual- CSS is not getting applied to the visual from the visual.less

1 Reply

Related content

POwer bi Table visual gets unfiltered

User Group Leader Get Started Guide

Get more visuals

Get data from Web

PowerApps visual Error getting Environments