Why isn't CSS import working in my Remix template?

Dvaer · ‎09-08-2023

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?

myhackinfo · ‎10-12-2023

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

see: https://prnt.sc/5krxe_JaAdDy

hacun3jr · ‎10-26-2023

it worked!

Appifiny · ‎07-21-2024

This seems to be broken now in the latest version using Vite.

Try the best recent order app for Shopify free for 7 days: https://apps.shopify.com/recently

made4Uo · ‎10-24-2024

@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>

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

Made4uo-Ribe · ‎10-25-2024

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 },
];

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

Why isn't CSS import working in my Remix template?

Why isn't CSS import working in my Remix template?

Community Blog Articles