Build debugging

[ericgauvin]

@MWDelaney I followed these instructions, but I’m still not seeing my test animation working. Where should I be looking to confirm that I have this set up correctly. Also, not sure if I am supposed to also run yarn build.

Am I supposed to see animate.min.css somewhere in the source code? I’m not seeing it.

Thanks for your help.

[MWDelaney]

Hi,
Yes you’ll need to build your styles any time you add or change something in them (in this case, adding _animate.scss to your autoload directory).

You won’t see the animate.css file in your source because it’s being compiled into your main.scss just like everything else.

[ericgauvin]

Thanks. That’s what I was thinking. I’m still not seeing my test animation working.

After yarn add animate.css I get success Saved 1 new dependency.
yarn build is also successful.

I looked inside main.css. I don’t see anything for animate.css. Where else do you think I can look?

[MWDelaney]

Eric, I’ll need to see your code, then. Can you confirm that a) you’re using Sage 9, and b) you’ve added animation styles to elements in your html?

Also show your main.scss and the contents of each file in your styles autoload directory.

Thanks!

[ericgauvin]

Thanks.

I can confirm I’m using Sage 9, because I just recently installed it.

The animate.css class looks like this in page-header.blade.php

<h1 class="animated bounceInLeft">{!! App::title() !!}</h1>

In reviewing the sage docs, it says " The dist folder will contain a _/node_modules/ directory that has any assets referenced from your packages." I’m not seeing a _/node_modules/ folder in dist.

Edit:
I do have a node_modules folder at the same level as dist. It contains animate.css.

From my style.css file:
Version: 9.0.5

[MWDelaney]

@MWDelaney

Also show your main.scss and the contents of each file in your styles autoload directory.

Please and thank you

[ericgauvin]

main.scss
`@import “common/variables”;

// Import Slick
@import “~slick-carousel/slick/slick.scss”;
@import “~slick-carousel/slick/slick-theme.scss”;

/** Import everything from autoload /
@import "./autoload/**/";

/**

• Import npm dependencies
• Prefix your imports with ~ to grab from node_modules/
• @see https://github.com/webpack-contrib/sass-loader#imports
  */
  // @import “~some-node-module”;

/** Import theme styles */
@import “common/global”;
@import “components/buttons”;
@import “components/comments”;
@import “components/forms”;
@import “components/wp-classes”;
@import “layouts/header”;
@import “layouts/sidebar”;
@import “layouts/footer”;
@import “layouts/pages”;
@import “layouts/posts”;
@import “layouts/tinymce”;`

[ericgauvin]

I have 2 files in my autoload directory.

site/web/app/themes/theme-name/resources/assets/styles/autoload/_animate.scss

@import "~animate.css/animate.css";

site/web/app/themes/theme-name/resources/assets/styles/autoload/_bootstrap.scss

@import "~bootstrap/scss/bootstrap";

[ericgauvin]

Hold your horses. Looks like it’s working now. I came across an node error I was getting with yarn build. Fixed that with npm rebuild node-sass. Now it’s working.