App reviews, troubleshooting, and recommendations
I am trying to import react big calendar in my shopify app in remix. When i try to import it and run, the import does not seem to work.
I have tried adding rules in the config file, changing the css directory and even putting it in public.
Does anyone know how to import css in the remix template?
To add a custom CSS file in Remix, you first need to create a file in the /app/styles/ directory.
For example, you could create a file called setup.css.
Once you have created your CSS file, you need to add it to the links export of one of your Remix routes.
For example, you could add it to the links export of your app._index.jsx file.
import stylesUrl from "~/styles/setup.css";
export const links = () => {
return [{ rel: "stylesheet", href: stylesUrl }];
};
it worked!
This seems to be broken now in the latest version using Vite.
@Appifiny and future readers
1. You can add the style as a link. Under the public folder, create a styles folder and a file base.css.
2. Under the app folder, find the root.tsx and add the code below inside the <head>
<link rel="stylesheet" href="/styles/sorting.css" />
Sample element usage
<div className="container">
...
</div>
Sorry, this is the correct instructions below according to Remix documentation. You just need to add ?url at the end of your import
import type { LinksFunction } from "@remix-run/node";
import styles from "~/styles/dashboard.css?url";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: styles },
];
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025