Hydrogen template

[liaoyio]

What is the location of your example repository?

https://github.com/liaoyio/hydrogen-dev-r7/blob/main/app/components/header/index.tsx

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

"@shopify/hydrogen": "2025.7.0",

What version of Remix are you using?

"react-router-dom": "7.9.2"

Steps to Reproduce

Hydrogen Template - Imported CSS Not Working Properly in Local Preview!

1. Initialize the project and install SCSS:

npm create @shopify/hydrogen@latest

2. Create a header.css file:

.header {
  background-color: black;
  color: white;
}

.header-dots {
  position: relative;
}

.header-dots::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 100%;
  top: 16px;
  right: 10px;
  background: #00deb0
}

 /* Mobile styles */
 @media screen and (max-width: 768px) {
  .header-dots::after {
    width: 6px;
    height: 6px;
    top: 12px;
  }
}

3. Import the CSS or SCSS file in the Header component:

import { NavLink } from 'react-router';
import './header.css';
// or import './header.scss';

export const Header = () => {
  return (
    <div className="flex items-center px-8 py-6 font-semibold header">
      <div>
        <h1>
          <NavLink prefetch="intent" to="/" end>
            Demo Store
          </NavLink>
        </h1>
      </div>

      <div className='flex-1 flex items-center justify-center'>
        <ul className='flex items-center flex-wrap justify-center gap-6'>
          <li>
            <NavLink prefetch="intent" to="/" end> Home </NavLink>
          </li>
          <li>
            <NavLink prefetch="intent" to="/collections/keyboards" end> Keyboards </NavLink>
          </li>
          <li>
            <NavLink prefetch="intent" to="/collections/keycaps" end> Keycaps </NavLink>
          </li>
        </ul>
      </div>
      <div>
        User
      </div>
    </div>
  );
}

4. The defined CSS briefly flashes when the page loads, then immediately disappears.

Expected Behavior

The imported CSS should work properly！

Actual Behavior

When I use the initial template created with npx create-react-router@latest, there are no issues with importing CSS!

[spacedawwwg]

I've found that importing CSS like this is client-side only.

I would expect it to work server-side though. No idea if it's on the Hydrogen/React-Router team's priority list to look at though

:-(