如何在基于Remix模板的Shopify自定义应用中添加CSS

最优方案：路由级CSS按需加载（Remix官方推荐） #

Remix原生支持在路由组件中直接导入CSS，会自动实现按需加载——仅当该路由激活时才加载对应样式，完美适配app/routes/main/products.jsx这类路由级组件的场景。

操作步骤：

1. 在app/routes/main/目录下创建对应CSS文件，例如products.css
2. 在products.jsx顶部导入该CSS：

// app/routes/main/products.jsx
import "./products.css";

export default function ProductsRoute() {
  return (
    <div className="products-container">
      {/* 路由内容 */}
    </div>
  );
}

3. 在products.css中编写路由专属样式：

.products-container {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
/* 其他仅作用于该路由的样式 */

注意：该方式导入的CSS默认全局生效，建议给路由根元素添加专属类名（如products-container），避免样式污染其他组件。Remix会自动处理CSS的打包、缓存和按需加载，无需额外配置。

备选方案1：CSS Modules（严格样式隔离） #

如果需要确保样式仅作用于当前组件，可使用CSS Modules实现作用域隔离：

1. 创建命名为products.module.css的文件（必须以.module.css为后缀）
2. 在products.jsx中导入并使用：

// app/routes/main/products.jsx
import styles from "./products.module.css";

export default function ProductsRoute() {
  return (
    <div className={styles.container}>
      {/* 路由内容 */}
    </div>
  );
}

3. 在products.module.css中编写样式：

.container {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

备选方案2：内联样式（简单场景快速实现） #

对于少量样式需求，可直接使用内联样式，无需额外CSS文件：

// app/routes/main/products.jsx
export default function ProductsRoute() {
  const containerStyle = {
    padding: "1rem",
    maxWidth: "1200px",
    margin: "0 auto"
  };

  return (
    <div style={containerStyle}>
      {/* 路由内容 */}
    </div>
  );
}

备选方案3：全局CSS结合专属类名 #

若项目已有全局CSS文件，可在其中添加路由专属类名，再在组件中引用：

1. 在全局CSS文件（如app/styles/global.css）中添加：

.products-route-container {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

2. 在products.jsx中引用该类名（若全局CSS未在根路由导入，需手动添加导入）：

// app/routes/main/products.jsx
import "~/styles/global.css";

export default function ProductsRoute() {
  return (
    <div className="products-route-container">
      {/* 路由内容 */}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Yuvraj Singh Gurjar