6

We are building Lightning Web Components and styling each one using the CSS file within each component folder. This is starting to become long and out of control.

I understand that one could upload a CSS file as a static resource and import it with loadStyle into the relevant components, but my experience has been that this does not allow you to edit the CSS file on the fly.

What is the best way of using SASS/SCSS with Lightning Web Components, assuming this is possible?

My background has mostly been in React, where this is easy and well-documented, though I understand that Lightning Web Components are very new!

Improve this question
3
  • salesforce.stackexchange.com/a/63299/60368
    – Oleh Berehovskyi
    Jun 27, 2019 at 11:05
  • @OlehBerehovskyi you may want to add it as answer with the note that the statement is also true for aura / lightning components and require a custom build step if desired.. don`t think anything else can / needs to be said for now :) (and if somebody has a ready to use solution he just can add it )
    – Renji-xD
    Jun 27, 2019 at 11:45
  • Thanks for your responses - glad to know I'm not the first ever to have this problem but it's a pity there's no readymade solution!
    – Andrew
    Jun 27, 2019 at 14:10

1 Answer 1

Reset to default
7

Answering my own question with the hacky workaround I've settled with for now.

Basically making a folder of the SCSS files outside of the codebase, then running a sass command where the output is the CSS file that is in the folder of the LWC itself, ie.:

sass --no-source-map --watch \
some/path/to/component1.scss:different/path/to/lwc/component1/component1.css \
some/path/to/component2.scss:different/path/to/lwc/component2/component2.css

--no-source-map is necessary since you won't be able to deploy your LWCs if they have an unexpected .css.map file in them.

Obviously far from "the best" but adequate for now.

Improve this answer
1
  • I also needed this. I saw that if I create a subfolder, lets say scss under root, and then if I create the same tree structure as in lwc folder then with sass --no-source-map --watch scss:force-app/main/default/lwc I do not have to specify anymore each file. So I will have root/scss/lwc1/lwc1.scss and I will get root/force-app/main/default/lwc/lwc1/lwc1.css Hth
    – Čikić Nenad
    Dec 15, 2020 at 12:46

You must log in to answer this question.

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