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:
-
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).
-
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
Hello. I know this is an older topic but I am having a similar issue and this was the closest thing I could find to what I’m looking for and I’m hoping someone might be able to help.
Our company has an internal library of Aurelia v1 components that we have built as an Aurelia plugin and published as a npm package to consume by our other projects. We have been able to get it working for the components themselves, but now we are attempting to consume shared styles in .scss files and haven’t been able to get it working.
All of our components are listed under src/elements, and those files and their associated styles work as expected. However, we also have shared styles located in src/styles we would like to export as well and so far I haven’t found anything that works. These styles are scss partials we are rolling up into an _index.scss file that we would need to use in our main repo as well as inside the dev-app.
So far, I have attempted to import them as michaelw85 suggested in the index.ts file, like “import ‘./styles/_index.css’;” but that always gives a console error of “GET http://localhost:9000/dev-app/__dot_dot__/src/styles/_index.css 404 (Not Found)”. I have also tried using the relative import instead, like “import ‘src/styles/_index.css’;” but that does not work either.
I have also noticed that none of these files are ever copied or compiled within the dist folder. Every file in the src folder is built and copied when we run “build-plugin”, but any file located within src/styles is never copied or compiled. I have attempted to reference these files directly with the components using require as well and they still will not show up, and I believe that is contributing to why I cannot reference them within the dev-app, as trying to reference them within the dev-app app.ts file through ‘import ‘resources/styles/_index.css’;’ or through the app.scss file like ‘import(‘resources/styles’)’ will not work either. Any of these changes and any number of combinations I have tried for the paths always yield the same result and at this point I am out of things to try.
TL;DR:
- We cannot get any of our shared styles exported successfully
- None of our shared styles are ever copied/built within the dist folder
If anyone has any ideas/suggestions as to how to achieve this it would be very much appreciated. Thanks.
You are using cli bundler for your app.
Cli bundler is also used in the plugin project, because it’s the only setup we supported for Aurelia v1 plugin.
First, in your plugin project, all scss files were compiled into css files. The script is in your plugin project’s aurelia_project/tasks/process-css.js (or .ts) function pluginCSS. You can comment out .pipe(... sass.sync...) and .pipe(postcss...), so that all scss files will be untouched, and copied straight to dist folder.
Then in your app project, you have to make at least one scss file in your app’s src folder, something like src/app.scss, you can then import the file in your ts/js code import './app.scss';.
In the src/app.scss, you can import the scss file(s) from npm packages,
src/app.scss
import '~npm-package-name/dist/path/to/index.scss';
This src/app.scss is a way to let sass compiler to kick in. It will be processed by the app’s aurelia_project/tasks/process-css.js (or .ts) file. And the dependency’s dist/path/to/index.scss is processed by gulp-dart-sass. Note the special way (prefix ~) to load npm package’s scss file. This dependency loading is handled by sass plugin node-sass-package-importer which you can find in your process-css task file.