Compile CSS with webpack

Hi there. I know this is basic but I am new in webpack that integrated from Sage 9 instead of gulp. I am trying to import the slick carousel jquery plugin into my theme. So I add this line into config.json:

"main": [

Then I run npm run build command. I got this error message:

ERROR in /Applications/MAMP/htdocs/mylib/wp-content/themes/sage/~/slick-carousel/slick/slick.css
Module parse failed: /Applications/MAMP/htdocs/mylib/wp-content/themes/sage/node_modules/slick-carousel/slick/slick.css Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
| /* Slider */
| .slick-slider
| {
|     position: relative;
 @ multi ./scripts/main.js ./styles/main.scss ../../~/slick-carousel/slick/slick.css

Can anybody help me? I appreciate that.

Take a look at the Sage 9 docs, they already include Slick as an example :wink:

Thanks Ben. That’s very useful. One more problem: I’ve installed wow.js package using npm. I imported it into main.js like this import 'wow.js';. And then I invoked it in common.js file like this:

export default {
  init() {
    // JavaScript to be fired on all pages
    new WOW().init();
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired

I ran npm run build without errors. But when I return browser. wow.js library does not work. I inspected and got this error message:

common.js:5 Uncaught ReferenceError: WOW is not defined
    at Object.init (common.js:5)
    at (Router.js:21)
    at Router.loadEvents (Router.js:27)
    at HTMLDocument.<anonymous> (main.js:27)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)

It seems wow.js still is not complied. So I checked main.js and it complied. Any suggestions?