LWC Non-Default Template CSS Display

Issue #1330 resolved
Kristoffer Greene created an issue

The template CSS files for templates aside from the main/default sharing the folder names don’t display correctly. On some Windows machines at least, it displays a template’s (not necessarily even the same one) html file instead of the correct CSS file.

How to reproduce:

  1. Create a new LWC component.
  2. Create a new template inside the LWC folder aside from the default. For example, if the LWC component is newLwcComponent and the corresponding default/main template files are newLwcComponent.html and newLwcComponent.css, create a new set of template files named say, newTemplate.html and newTemplate.css. These other templates can be switched with the render() method when imported.
  3. Attempt to open and view newTemplate.css.

Edit the css files in another editor and deploy the lwc bundle as usual with IC2.

Comments (4)

  1. Scott Wells repo owner

    I just submitted a fix for this for the next build (either later this week or early next week). There are two parts to the fix:

    1. You're allowed to add a component CSS file per-component in a bundle directory. If there are multiple components in the same bundle directory without CSS files, the user is prompted for the component for which a CSS file should be created. If there is only one component without a CSS file, a CSS file is created for that component without the prompt.
    2. The tabbed editor now includes other CSS files in the bundle directory.
  2. Log in to comment