Roots Discourse

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


#1

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!


#2

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


#3

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


#4

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.


Sage 9 Adding and Enqueueing A JS Library
#5

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"
    }
]

Add a simple CSS file to Sage 8.5.2
#6

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.


#7

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/';

#8

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?


#10

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() {
  },
};

#11

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>

#12

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

Thank you again @MWDelaney