How do we include js and css dependencies in Sage 9?

Hey y’all, it’s embarrassingly simple Sage 9 question time again!

In Sage 8.x we used Bower and, if the dependency included a main section, gulp picked up our dependencies and built them in for us (either compiled with our CSS or minified with our js). How are we doing this in Sage 9? I imagine it’s now npm, but do dependencies get built in automatically?

Thanks!

Is this helpful? If not, would definitely like to improve it

4 Likes

I’ll follow the example and see how it goes. Thanks for the lightning quick response!

This worked. I have to know more about the structure of the package’s repository than I did back in 8.x, but it definitely works.

Any improvements could automatic inject the JS and CSS file into the main.js and main.scss?

Based on library’s json file which with the main path:

"main": [
    "slick/slick.js",
    "slick/slick.css",
    "slick/slick.less",
    "slick/slick.scss"
]

if has overrides then use the new one:

 "overrides": {
    "slick-carousel": {
      "slick/slick.js",
      "slick/slick.scss"
    }
]

This might need a new thread, but as of right now even though this Slick Carousel example works, it fails at yarn run build:production due to style lint, if you’re including the slick-theme.scss file.

In case other people reach this page when searching for a solution, I was getting the following error when trying to run yarn run build:production with slick-carousel

Module build failed: ModuleNotFoundError: Module not found: Error: Can’t resolve ‘./ajax-loader.gif’

The easiest solution was to just define paths for $slick-loader-path

// Path variables 
$slick-loader-path: '~slick-carousel/slick/';
$slick-font-path: '#{$slick-loader-path}fonts/';
2 Likes

I know this is an old thread, but I followed the instructions (even from the book), but there is no asset folder inside “dist/vendor”.

Did something change over the time?

I am using the new Sage theme with wordpress 5.

Tried to add slick-carousel.

Edit: Well still no folders in dist, but it is working.
Nevertheless only on “common.js”, when I try to do a slick call inside a blade.php file it shows an error.

How do you “global” the slick command?

There won’t be a vendor folder inside dist; can you point to where you saw this? If we have incorrect documentation I want to correct it.

To work with Slick you can do the following:

From your Sage-based theme directory run:

$ yarn add slick-carousel

Then, in your resources/assets/scripts/routes/common.js add the following at the very top of the file:

import 'slick-carousel';

You can now use slick anywhere in your init() or finalize() within common.js, which will load and execute on every page of your site. Example:

export default {
  init() {

  ...

      // Slick Carousel
      $('.slick-carousel').slick();

  ...

  },
  finalize() {
  },
};
2 Likes

Hi @MWDelaney,

thank you for your reply.

1.) In the book you’re selling under “3rd Party Packages”, there is an example with slick and there is a point

3… After running yarn build from the theme directory, your package will be built with your theme assets. The dist folder will contain a vendor directory that has any assets referenced from your packages.

2.) On your page: https://roots.io/sage/docs/theme-development-and-building/ you’re using “_node_modules” -->

After running yarn run build from the theme directory, your package will be built with your theme assets. The dist folder will contain a _/node_modules/ directory that has any assets referenced from your packages. The compiled CSS and JS will reference these assets without having to manually edit paths

Which is also not showing up.

3.) When I do your example, ofc it is working, but when I use multiple instances for slick with differents settings, this wouldn’t be helpful right? Isn’t there a way that I can initialize slick inside the blade.php block template?

Eg.:

<script>
     // Slick Carousel
     $('#slick-carousel-'+ {{$block['id']}}).slick({
          dots: true,
          infinite: true,
          speed: 300,
          slidesToShow: 1,
         centerMode: true,
        variableWidth: true
     });
</script>

Well, nevermind I placed the
$('.slick').slick();
in the common.js and then created my individual carousel via data-slick.

Thank you again @MWDelaney

Hi, I’m trying to import this library Stickybits as reccomended by the developer, placing import stickybits from 'stickybits'; in common.js

The point is that the library works only after yarn build or yarn build:production but not while yarn start. But there is no error in console, in each case. :thinking:

I also tried to import it in the Sage way (in main.js) or in webpack.config inside ProvidePlugin but in these cases I get console error.
I have no more idea how to get it works. Someone can helps?

Thanks

So, I do the following and I’m getting an error

$ yarn add smooth-scroll

Then in resources/assets/scripts/routes/common.js, on the first line, I have:

import ‘smooth-scroll’;

Under finalize(), I have:

finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired
var scroll = new SmoothScroll(‘a[href*="#"]’);
},

When I yarn build, I get the following error:

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I run yarn run lint:scripts and it tells me the following:

/var/www/website.com/wordpress/wp-content/themes/websitetheme/resources/assets/scripts/routes/common.js
9:9 error ‘scroll’ is assigned a value but never used no-unused-vars
9:22 error ‘SmoothScroll’ is not defined no-undef

This leads me to believe the Smooth Scroll script is not loading.

As reference, this is the Smooth Scroll documentation: https://github.com/cferdinandi/smooth-scroll

I’ve tried the “proper” way that the official documentation states and that doesn’t work either.

I’m wondering if anyone has any idea what’s wrong?

I can’t just download the Smooth Scroll JS file and place it in my assets/scripts folder and enqueue it in setup, because ESlint throws back all sorts of errors.

Should I just enqueue the CDN and create/enqueue a JS file and place this code in it?:

var scroll = new SmoothScroll(‘a[href*="#"]’);

Both of the issues pointed out by the linter are the source of your consternation.

9:9 error ‘scroll’ is assigned a value but never used no-unused-vars
9:22 error ‘SmoothScroll’ is not defined no-undef

1. You aren’t using scroll, but you are setting it.

You are attempting to instantiate SmoothScroll onto a new var scroll, but then you aren’t doing anything with that var. If you aren’t doing anything with it, why save the reference? You can fix this error by changing line 9 to simply be:

new SmoothScroll('a[href*="#"]');

In other words: no reason to save a reference to the SmoothScroll object if you never utilize that reference.

If you do plan on doing further things with the scroll var and just haven’t gotten around to it, then you could do something like this for now:

const scroll = new SmoothScroll('a[href*="#"]'); // (aside: const is probably better than var here)
console.log(scroll); // now we're actually using scroll, which satisfies the linter

This should eliminate the linting error on line 9.

2. SmoothScroll’s import is not working as desired

Line 22’s error is telling you that there is no SmoothScroll object, and here I think your problem is with the library itself, which uses UMD imports and does not support ES6 imports (https://github.com/cferdinandi/smooth-scroll/issues/440). I don’t think Sage 9 supports the dynamic import that Chris suggests but it’s worth a shot.

Otherwise, personally, I’d just find a smooth scroll library that does support ES6 (like https://www.npmjs.com/package/sweet-scroll, although I haven’t used it). There have to be hundreds of these things on npm package search. Or, because this is so simple, it probably isn’t the worst idea ever to just include your own drop-in along the lines of https://gist.github.com/james2doyle/5694700. But I’d start with NPM.

Hope some of this is helpful!

Perhaps my answer here can help someone: Unable to import javascript from npm package in Sage 9