Remix CSS 语法
Remix 是一个多页面的框架，对页面的原生 CSS 的支持分为两大类型：
- 使用 links 函数，转换成 link 标签支持 css
- 使用 javascript import 语法支持 css ，但是最终也会成为 link 标签
- 驼峰命名法
.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 级， 添加全局样式
- 定义全局样式
- 在 root.tsx links 函数中添加全局样式
import globalStylesHref from '~/styles/global.css'
export const links: LinksFunction = () => [
{ rel: "stylesheet" , href: globalStylesHref },
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];
- route 级， 添加路由级样式
- 定义 route 级样式
- 在 routes/xxx.tsx links 函数中引入样式
import ArticleStylesHref from "~/styles/article.css";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: ArticleStylesHref },
];
- nest route 级，添加嵌套路由样式
- 理解嵌套路由（配合
<Outlet />使用） - 定义 nest route 级样式
- 在 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 中定义媒体查询断点
以上就是Remix如何支持原生 CSS的详细内容，更多关于Remix支持原生 CSS的资料请关注编程网其它相关文章！
