Third-party CSS import + image paths (2023)

We are on a mission to refactor all the old<script>y<link>hang tagsforaof our molds.For the basic design, we're halfway there!there is onlyonescript tag, which points to theapplicationProhibited:

This isPerfect.

Back at the top, weDoesyou still have several binding tags including Bootstrap from a CDN,FontAwesome, which I apparently just inserted into mypublic/cssdirectory,and some custom css atstyles.css:

First, remove Bootstrap!Nosamehow can we properly install JavaScript libraries with Yarn,we canWhat elseinstall css libraries!Quadra!

Insideaplicación.js, we are already importing a singleapplication.cssoffice hour:

Wecouldadd another importCorrecthere for Bootstrap CSS.instead Ito preferto import onlyoneCSS file per entry.so sinceWithinthis css file, we can use the pattern@to importCSS syntaxto import other CSS files.For Webpack, these two approaches are identical.

Now youmay thatto be thinking:

Don't we need to install the bootstrap css library?

And yes!Well, I mean, no!Um, I mean, we already did!Insidenode_modules/, To search forear/.This directory contains JavaScript, butWhat elsecontains the Bootstrap CSS.

Importing CSS from node_modules

Mas... hum...In JavaScript, we can sayto importthen just the package name and...it just works!But wecan notrepeat the same trick for CSS.

Instead, we'll point you straight in the way we want, which,in this case it's probablydist/css/bootstrap.css.That's how:@to import,~ throwis the way:/dist/css/bootstrap.css:

Los~part is special for CSS and Webpack.When you want to refer tonode_modules/directory inside a CSS file,you have to start with~🇧🇷 This isdifferentwhat javascriptwhere any road thatnoStart with. should live innode_modules/.After~, it's just a normal boring road.

But yes...That's all we need!Move and update.This looks exactly the same!

Referencing only the package name

And... remember how I said that wecan notjust import CSS referencingonlythe package name?That was...a kind of lieShorten it to just~ throw:

Go try it!Update and...the same!

That isit works thanks to a little extra feature we've added to Encore...which may become a more standard feature in the future.We already know that when we import a package by name in JavaScript,Webpack searches inpackage.json, find itdirectorwrench....there it is and useThat isknow what you owefinallyimport thedist/js/bootstrap.jsoffice hour.

AnylibrariesWhat elseinclude thesestyleoboldchaves.and when theyDoes, you just need@to import ~and the package name.Since we're doing this from within a CSS file,know how to look insidepackage.jsonforstyleWrench.

This issinglea shortcut to do exactly what we did before.

Bootstrap, comprove!Let's move on: The link tag below is for FontAwesome.Get rid of it and celebrate by removing thepublic/css/font-awesome.cssoffice houryall thissources/directory.That's great!We're pulling out things I never should have done in the first place.

Then download FontAwesome with:

topic add font awesome --dev

When finished, go back tonode_modules/and searchamazing font/.I get it! Nice!Has directories forcss/,any less/,scss/the format we want.And happily if you look insidepackage.json, thatWhat elsethere is astyleWrench.

Bread eaten!Insideapplication.css, add@import '~font-awesome':

Done. Find your browser and update.We'll see...down here, yes!That isis a FontAwesome icon.Still works!

But this iswaycooler than it looks!Internally, the FontAwesome CSS file references somesourcerecordsthat the user's browser needs to download: these files here.But... these files are not in ourpublicdirectory...So shouldn't the paths to it be broken?

Closelynode_modules/and take a look atpublic/build/directory.Wow! where did he do itsources/does the directory come from?When Webpack sees that a CSS filerefers toto a source file,Hearing thisthese sourcesinside itsources/directory andrewriteor non-final codeapplication.cssoffice hourso that the source paths pointhere.yes, justyou drivethat.

It also automatically adds a hash to the filename based on the file.contents.So if we update the source file this hash will change automaticallyand the CSS would point this out automatically.This isfree of chargebrowser cache destruction.

Move our CSS to Encore

OKonemore link tag to go:

Tire!so opencss/styles.css, copyalladdition, delete that file and thenapplication.css,highlight the blue background and paste it!

It's a simple step, so...it should work right?No! Take a look at the failed build:

Module not found: cannot be resolved../images/navegación-espacial.jpgin ourassets/css/directory.

It doesn't show the exact file, but we only have one.Ah,here it isthe problem:

PhpStorm is also very angry about this.This background image refers to../images/, What was itPerfectwhen the code lived inpublic/css/directory.But when we change it, we break that path!

This is incredible!Instead of being silently unaware that we've done it, we get aaccumulatemistake.Incredible! We can't open roads without Webpackyelling.

To fix this, let's "cut" all theimages/directory and move it toactive/chainer.Yes, it's over.But Encore doesn't know how to recompile...then make a small change and save.Build successfully!

Go see.Update! It works!it's includedBest, look ataccumulate/chainer.we have aimages/directory withspaceship.jpgnot inside.singlejust like fonts, Webpack sees our way,realizewhatspaceship.jpgIt has to be publicand so transfers it toconstruction/images/directoryand rewrite theBackground imagecode in the final css to point here.

The moral is this: everyoneweWhat we need to do is worry about writing our code correctly:using the appropriate relative paths from the source CSS file to the source image file.Webpack handles the nasty details.

now thisThatbreak some<img>tags on our website that refer to some of these files.Now that they are not inpublic/directory...Do not workWe'll take care of that shortly.

But next, we're going to get more out of our CSS using Sass.