egghead-logo-white
Learn to Code
Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
10s
25s
Download in HD
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Make Webpack Easy with Poi

Make Webpack Easy with Poi

Autoplay

    Compile CSS or Sass with Poi

    John LindquistJohn Lindquist
    webpackwebpack
    scssSCSS
    cssCSS

    Poi uses sensible defaults for importing .css files. Sass isn't included by default, but simply installing the required packages gets you up-and-running. This lesson walks you through importing css and scss files into your project.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: I'll create a CSS file, call it styles.css, make everything have a font family of whatever this first one is -- Franklin Gothic Medium sounds fine -- then switch back over to my index. Because Poi ships with the style-loader and the css-loader, I can just go ahead and grab the styles, hit save and those styles are applied.

    If you prefer to use Sass, we'll just change this to a SCSS file and then import the SCSS file. You'll see it can't resolve the sass-loader. I'll go ahead and npm install node-sass and sass-loader, so our devDependencies. Let those install. Then stop Poi. Start it up again. Now you're using Sass.

    To prove that's working, I'll go ahead and add a color variable. We'll say this is red and set the color to color. Hit save there. You can see it auto refreshed and applied the Sass file with red.