Custom Aurelia app scaffolding (last “makes” option) not working properly with certain choices

Help Requests
1

Hello,

Running npx makes aurelia and choosing Custom Aurelia 2 Project:

Custom App
Custom App1366×390 66.4 KB

produces an app that does not load CSS classes. Whether I import the stylesheet locally in the HTML file , or leave it to convention, CSS classes are not loaded. I say classes because the styling in the CSS files as applied to built-in tags works just fine. In the default my-app.css file, this declaration doesn’t work (while all the rest of the styling does):

.active {
    background-color: yellow;
}

I’m using the configuration as is, as generated by makes, but of course I had to create a CSS file. So I created welcome-page.css, then relied on convention for loading. I then tried explicit local import. No luck.

I tried the SCSS option just to see if that was a happy path. That didn’t work either.

Vite doesn’t exhibit this problem.

2

cc @huochunpeng

@estaylorco when you create an issue with the scaffolding, can you help copy the summary one-liner command to make issue replication quicker? Normally makes will print that line out at the end of your selection.

3

Webpack rewrote the .active into some coded class name.

/* ... */
a:hover {
  background-color: darkgray;
}

.mtxMk0oMjmSLHssaaOkL {
  background-color: lightgray;
}

Must be configuration issue for the latest css-loader. I will investigate.

4

Remove options for css-loader, the option was only to patch css-module config.

3 Likes
5

Yes, that solved the problem! Thank you!