Compile CSS or Sass 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.
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.
Just a heads up for anyone who watches this, the CSS loaders are no longer included. When I attempted to run what's in the video, Poi told me I needed to install
vue-style-loaderandcss-loader. After I added these as dev dependencies everything worked well.