Compile CSS or Sass with Poi

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 6 years ago

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.

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.