'Why Laravel Mix deletes CSS @import url()

I'm using Laravel Mix, and when I run npm run dev, everything is good, but when I run npm run prod, in minified style.css, all @import url()s get deleted!

Webpack

const mix = require('laravel-mix');

mix.setPublicPath('public');

if (mix.inProduction()) {
    mix.version();
}

I have no settings, and I use mix.styles([sources, dist]) to manage my pure CSS style files. In one of my sources, I have something like the following.

@import url(../../dist/icons/font-awesome/css/fontawesome-all.css);

However, when I minify them, all @imports are gone! Is there any setting or something? Is resolve-url-loader a package to manage the kind of such things? If yes, would you please make an excellent example of using it?

laravelnpmwebpacklaravel-mix


Solution 1:[1]

To import Font Awesome for compiling assets in Laravel do it this way...

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

See: Laravel 5.7 + Font Awesome

Solution 2:[2]

If it is a font-awesome case, just change life easier by using a personal font-awesome personal cdn kit. All you need is to register an account, get a free or pro plan, and get the url.

@import url(your-fontawesome-personal-cdn-link);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 mondayrris

Related Questions