如何在 Remix 中使用原生 CSS ？

Remix 是一个多页面的框架，对页面的原生 CSS 的支撑分为两大类型：

• 运用 links 函数，转换成 link 标签支撑 css
• 运用 javascript import 语法支撑 css ，但是终究也会成为 link 标签

Remix CSS 语法

• 驼峰命名法

.PrimaryButton {
  /* ... */
}

• html 特点法

[data-primary-button] {
  /* ... */
}

links 函数写法

• rel
• href
• media

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
import globalStyleHref from '~/styles/globalStyleHref'
export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: globalStyleHref,
      media: "(min-width: 1280px)",
    },
  ];
};

links 函数层级

• root 级， 增加大局款式

1. 界说大局款式
2. 在 root.tsx links 函数中增加大局款式

import globalStylesHref from '~/styles/global.css'
export const links: LinksFunction = () => [
  { rel: "stylesheet" , href: globalStylesHref },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

• route 级， 增加路由级款式

1. 界说 route 级款式
2. 在 routes/xxx.tsx links 函数中引进款式

import ArticleStylesHref from "~/styles/article.css";
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: ArticleStylesHref },
];

• nest route 级，增加嵌套路由款式

1. 了解嵌套路由（配合 <Outlet /> 运用）
2. 界说 nest route 级款式
3. 在 routes/xxx.yyy.tsx links 函数中引进 nest 款式

import articleDetailStylesHref from "~/styles/article.detail.css";
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: articleDetailStylesHref },
];

这以文章和文章概况作为嵌套路由，便利了解。

links 函数中 css 媒体查询

• media 特点, 一般用于断点，暗黑形式等

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: mainStyles,
    },
    {
      rel: "stylesheet",
      href: largeStyles,
      media: "(min-width: 1024px)",
    },
    {
      rel: "stylesheet",
      href: xlStyles,
      media: "(min-width: 1280px)",
    }
  ];
};
import ArticleStylesHref from "~/styles/article.css";
import Article1024StylesHref from '~/styles/article-1024.css'
import Article1208StylesHref from '~/styles/article-1280.css'
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: ArticleStylesHref },
  { rel: "stylesheet", href: Article1024StylesHref, media: "(min-width: 1024px)", },
  { rel: "stylesheet", href: Article1208StylesHref, media: "(min-width: 1280px)" },
];

第三方 css

href 特点直接拜访第三方地址：

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: "https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css",
    },
  ];
};

import 语法

import 语法需求配合 remix 供给的 @remix-run/css-bundle 包运用：

import { cssBundleHref } from "@remix-run/css-bundle";
export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

此刻就可以直接运用 import './xxx.css' 文件，这与 webpack css-loader 供给的能力相当了。

小结

• remix 对 css 支撑已经比较老练，市面上主流的 css 方案都正式在 v1.16.0 版本中安稳支撑。
• remix 通过 links 韩式支撑原生 css 的 link 比标签，规划上有一一对应的联系。
• 同时也支撑了运用 import 语法支撑，本质是主动的加上 link 标签
• 同时支撑不同层级的 css 初度运用时，需求了解 root/route/nest-route 的内容
• remix links 页支撑了 css 的媒体查询功能，能在 links 中界说媒体查询断点