[SalesForce] Using SASS/SCSS with Lightning Web Components

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!

Best Answer

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.

Related Topic