Remix如何支持原生 CSS方法详解
目录
- Remix CSS 语法
- links 函数写法
- links 函数层级
- links 函数中 css 媒体查询
- 第三方 css
- import 语法
- 小结
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的资料请关注我们其它相关文章!
赞 (0)