Use Poi to Build an Index.js with Modern JavaScript Features

Customize Poi's Default index.html Template

Configure Poi for Advanced Template Control

Build a Vue App with Poi

Customize Babel to Build a React App with Poi

Compile CSS or Sass with Poi

Use Markdown as React Components by Adding a Webpack Loader to Poi

Build and Analyze Your JavaScript Bundles with Poi

Use Poi Presets from npm to Skip Configuration

Setup PostCSS and Tailwind with Poi

Make Webpack Easy with Poi

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.

https://app.egghead.io/api/v1/lessons/webpack-compile-css-or-sass-with-poi/subtitles

Instructor: [00:00] 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.

[00:25] 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.

[00:53] 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.

Compile CSS or Sass with Poi

Share this video with your friends

Course

Make Webpack Easy with Poi