0

I've added React Awesomeslider into my project, which is built with Gatsby.js, Next.js and using Sanity.io as a CMS. The css is currently configured by post css.

https://github.com/rcaferati/react-awesome-slider

I've linked the plain css as advised in the documentation (and as I'm not using scss for this project).

Here is my component

import PropTypes from "prop-types";
import styles from "./Hero.module.css";
import client from "../../client";
import SimpleBlockContent from "../SimpleBlockContent";
import Cta from "../Cta";
import imageUrlBuilder from "@sanity/image-url";
import AutoplaySlider from "react-awesome-slider";
import AwesomeSliderStyles from "react-awesome-slider/dist/styles.css";
const builder = imageUrlBuilder(client);

function Hero(props) {
  const { heading, image, tagline, ctas } = props;

  const images = props.image;
  return (
    <div className={styles.root}>
      <div className={styles.content}>
        <h1 className={styles.title}>{heading}</h1>
        <div className={styles.tagline}>{tagline && <SimpleBlockContent blocks={tagline} />}</div>
        <AutoplaySlider
          play={true}
          cancelOnInteraction={false}
          interval={6000}
          style={AwesomeSliderStyles}
        >
          <div>
            {images.map((image) => (
              <img
                className={styles.image}
                src={builder.image(image).url()}
                className={styles.image}
                alt={heading}
              />
            ))}
          </div>
        </AutoplaySlider>
      </div>
    </div>
  );
}

Hero.propTypes = {
  heading: PropTypes.string,
  backgroundImage: PropTypes.object,
  tagline: PropTypes.array,
  ctas: PropTypes.arrayOf(PropTypes.object),
};

export default Hero;

Everything is showing as imported and the slider is appearing on the page however I'm having this show up in the console...

Warning: Unsupported style property awssld__timer--hidden. Did you mean awssld__timer-hidden?

And none of the other css seems to be pulling through either. Has anyone come across this before?

Any help would be appreciated.

Thanks

LAT89
  • 161
  • 3
  • 15

1 Answers1

0

In order to use external CSS files, you need to add ?raw at the end of the CSS file path, like so:

import AwesomeSliderStyles from "react-awesome-slider/dist/styles.css?raw";

It's documented here https://www.sanity.io/docs/styling#using-external-css-in-sanity-22b29fe9dcd4

Victoria
  • 131
  • 1
  • 4
  • Thanks @Victoria - must have missed that! I've added it in and still getting the same issue unfortunately – LAT89 Jun 03 '20 at 12:54
  • Oh no! Did you restart your studio after updating it? – Victoria Jun 12 '20 at 12:27
  • I did yep! I've been getting some weird next/post css errors so I have a feeling they aren't being loaded in at runtime. Exploring how I can resolve it in webpack (hopefully!) – LAT89 Jun 14 '20 at 19:24