Compile CSS with webpack

duyngha · June 11, 2017, 10:11am

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": [
  "./scripts/main.js",
  "./styles/main.scss",
  "../../node_modules/slick-carousel/slick/slick.css"
]

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.

ben · June 12, 2017, 12:15am

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

github.com

roots/docs/blob/sage-9/sage/theme-development-and-building.md#theme-assets

---
ID: 5322
post_title: Theme Development and Building
author: Ben Word
post_date: 2015-09-01 18:19:21
post_excerpt: ""
layout: doc
permalink: >
  https://roots.io/sage/docs/theme-development-and-building/
published: true
---
<p class="lead">These are the primary projects that make up the Sage workflow:</p>

<ul class="lead">
<li><h4><a href="https://webpack.github.io/">Webpack</a></h4><p><small>is used as a build tool for compiling stylesheets, checking for JavaScript errors, optimizing images, and concatenating and minifying files. In previous versions of the theme we used Grunt and Gulp as our build tools.</small></p></li>
<li><h4><a href="https://www.npmjs.com/">npm</a></h4><p><small>npm is a front-end package manager. Sage uses npm to pull in Bootstrap and jQuery as dependencies. In previous versions of the theme we used Bower as our front-end package manager.</small></p></li>
<li><h4><a href="http://www.browsersync.io">BrowserSync</a> with Webpack Hot Module Replacement</h4><p><small>BrowserSync with WHR keeps multiple browsers and devices synchronized while developing, along with injecting updated CSS and JS. In previous versions of the theme we used LiveReload for injecting assets.</small></p></li>
</ul>

<div class="cta-product cta-product-sage well well-sage module"><a href="https://roots.io/books/theme-development-with-sage/" class="media"><div class="media-left"><img class="media-object" src="/app/uploads/theme-development-with-sage-cover-800x1035.png" alt="Sage book cover"></div><div class="media-body"><h4><span class="badge bg-white text-sage">Get the book</span> <br> <span class="text-sage">Theme Development with Sage</span></h4><p class="lead">A step-by-step guide to setting up a custom Sage starter theme.</p><p class="visible-md visible-lg">Build well organized &amp; easily maintained WordPress themes using a modern web development workflow.</p><p class="text-right"><button class="btn btn-primary">Buy</button></p></div></a></div>

This file has been truncated. show original

duyngha · June 13, 2017, 3:48pm

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
    alert('ok');
    $('.slick').slick();
    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.fire (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?