4

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!

  • @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 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 at 14:10
3

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.

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.