Trouble importing CSS from one LWC into another

Question

I made a LWC to hold common CSS I want to import across different LWCs that I am working on.

Based on these release notes I created a component called myComponent and tried to import it in the CSS portion of one of my other LWCs, let's call it consumerComponent.

Here's my code.

myComponent Metadata:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <description>My Component</description>
    <isExposed>false</isExposed>
    <masterLabel>My Component</masterLabel>
</LightningComponentBundle>

myComponent CSS:

Holds a bunch of css

consumerComponent

@import 'c/myComponent';

The API version of the consumerComponent is also 49.

However I am getting the following error: Error during LWC component connect phase: [Class constructor MyComponent cannot be invoked without 'new'].

Any ideas or leads for this?

Answer 1

Never mind just figured it out.

I am using IntelliJ with Illuminated Cloud. Upon creation of a new LWC Illuminated Cloud instantiates a HTML and JS file in addition to the .css and .js-meta.xml files.

Upon erasing of the HTML and JS files everything worked like a charm.

My guess is that importing the shared CSS from the myComponent is causing a conflict, if it contains HTML, JS files, as that component is not being imported in the HTML as a child component by consumerComponent.