Inline css with @use css from node_modules

[molerat619]

Hi, I'm trying to use this:

<style>
      {{ inline(mix('css/main.css', 'assets/build')) }}
</style>

And it works, except that external css files are not considered. So in my main.scss I have this:

/** Plugins */
@use 'bootstrap.min';
@use 'node_modules/@mdi/font/css/materialdesignicons.min.css';

/** Shared */
@use 'ci';
@use 'shared';

/** Layout */
@use 'header';
@use 'footer';

/** Pages */
....

Not sure if it's actually good practice to point to a scss in the node_modules. But either way - when I run the build the materialdesignicons css is not inside the style-tag.

Any idea how to solve this?

Thank you for the great work on this project. It's a game changer!

[damiani]

This probably isn't an issue with the inlining, these styles are likely not ending up in your assets/build/main.css file at all. Is it possible that the materialdesignicons.min.css styles are getting stripped out by PurgeCSS?

[molerat619]

Thanks @damiani. I checked assets/build/main.css and it actually contains the materialdesignicon.min.css content.

In my dev tools I can see that I get a 404 for the font files though - which is not the case if I don't use the inline version. I can't see how that is related though.

[erickpatrick]

Hi @molerat619,

Do you have a sample project where we can se the replicated issue? Or better yet, could you provide a project/repo which replicates said issue?

[molerat619]

Hi @erickpatrick , yes I have just created a repository so you can have a better look: https://github.com/molerat619/jigsaw-dummy I verified that the issue occurs there too.

I use node v12, run npm watch and npm run build (see package.json). If I use inline, I just get a square and the icon is not found. If I use it non inline, the icon (airplane) is displayed.

[erickpatrick]

Hi @molerat619,

I've just had time to look into your issue today. I've cloned your repository and ran the following:

• composer install
• npm install, and then
• npm run build-prod.

Doing so, also gave me the same square image you mention, however, it's not a problem of the inline itself. If you look close into the inlined CSS generated, you'll find something like this:

@font-face{font-family:Material Design Icons;src:url(../fonts/materialdesignicons-webfont.eot?v=5.3.45);src:url(../fonts/materialdesignicons-webfont.eot?#iefix&v=5.3.45) format("embedded-opentype"),url(../fonts/materialdesignicons-webfont.woff2?v=5.3.45) format("woff2"),url(../fonts/materialdesignicons-webfont.woff?v=5.3.45) format("woff"),url(../fonts/materialdesignicons-webfont.ttf?v=5.3.45) format("truetype");font-weight:400;font-style:normal}

The Material Design Icons uses a relative path to load its font files. Once you @use it in your Sass file, it will try to load from the root of your project/URL instead from the root of the Material Design Icon module folder. This makes the final page to load an invalid file like localhost:3000/fonts/materialdesignicons-webfont.woff thus causing the square to appear instead of the icon you wanted.

However, there's a solution for you. Instead of using @use to import the CSS from that module, you can directly @import the Material Design Icon file from CdnJS (or any other CDN or valid URL for that matter). The only caveat is that the @import rule needs to be after all @uses to compile properly, like so:

/** Plugins */
@use 'bootstrap.min';

/** Shared */
@use 'ci';
@use 'shared';

/** Layout */
@use 'header';
@use 'footer';

/** Pages */
@use 'adjusted-theme';
@use 'landing';
@use 'holding';

@import 'https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.min.css';

Once you do so, you will be able to see your real icon, as intended:

Please, let us know if this helped your case and if your are now able to have the intended behaviour.

Regards,

[molerat619]

@erickpatrick thanks so much for looking into this and helping me! In fact, the @import with CDN worked.

But I thought @import is deprecated, which is why I used @use. Also, I wanted to avoid an additional HTTP request for the CDN to improve page performance and Google ranking.

Do you have an idea how to achieve that, other than copying the css from the node modules and having it inside my project directly? The downside here obviously is that it won't get updated with the dependency and I have to remember to update it manually.