Remix如何支持原生 CSS方法详解

这篇文章主要为大家介绍了Remix如何支持原生CSS的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

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 级，添加嵌套路由样式

理解嵌套路由（配合使用）
定义 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 提供的能力相当了。