CLI PlugIn project with sass

I created a new plugin project using the CLI. No problem there. The CLI templates a hello world element with a .scss file. This is then used like this:

<require from="./hello-world.css"></require>

However, in my scenario, I have many .scss files that I have rolling up into one overall styles.scss file. What I can’t seem to figure out is the correct syntax to get this styles.scss (.css?) file into the dev-app for testing.

In app.html I’ve tried:

<require from="../src/styles.scss"></require>
<require from="../src/styles.css"></require>

with variations on the path like (src/, /, /src/).

In app.ts I’ve tried:

import '../src/styles.scss';
import '../src/styles.css';

I’m lost and confused. Any help would be greatly appreciated.

1 Like

The require from has te be done using *.css as extension and the path is relative to the current file or src folder. Have you tried <require from="styles.css"></require> (assuming it’s in the root of your src folder)?

In my own cli project I load centralized styles in the index.ts using import './style/main.css'; (my main.scss is located in src/style/)

1 Like

There are two ways:

  1. Recommended. If your plugin has a custom element called src/elements/hello-world.js, you can import the css in src/elements/hello-world.html just like this <require from="./hello-world.css"></require>. Then in your dev-app, you use <hello-world> as a globally available element, the element will load up the css file (transpiled from scss files).

  2. If your css is not loaded by custom element, your plugin probably requires end user (who consumes your plugin) to load the css file like <require from="your-plugin-name/hello-world.css"></require>. In your dev-app, you can use special path "resources" to directly refer resources in src/ folder, for example:

In your dev-app/app.js, do import 'resources/path/to/hello-world.css'; targeting src/path/to/hello-world.scss.

Or in your dev-app/app.html, do <require from="resources/path/to/hello-world.css"></require>.

Remember always refer to .css file, not .scss file. Because our plugin template uses cli-bundler to run and build, the final shipped files in dist/ folder only contains compiled .css files, there is no .scss source files for consumers to see.

FYI, the special "resources" path is briefly mentioned in “Resource import within the dev app”.
https://aurelia.io/docs/plugins/write-new-plugin#structure-of-plugin

1 Like