快捷導(dǎo)航

Remix如何支持原生?CSS方法詳解

更新時(shí)間：2023年05月06日 10:31:14 作者：喬治_x

這篇文章主要為大家介紹了Remix如何支持原生CSS的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Remix CSS 語法

Remix 是一個(gè)多頁面的框架，對頁面的原生 CSS 的支持分為兩大類型：

使用 links 函數(shù)，轉(zhuǎn)換成 link 標(biāo)簽支持 css
使用 javascript import 語法支持 css ，但是最終也會成為 link 標(biāo)簽
駝峰命名法

.PrimaryButton {
  /* ... */
}

html 屬性法

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

links 函數(shù)寫法

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 函數(shù)層級

root 級，添加全局樣式

定義全局樣式
在 root.tsx links 函數(shù)中添加全局樣式

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 函數(shù)中引入樣式

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

nest route 級，添加嵌套路由樣式

理解嵌套路由（配合 <Outlet /> 使用）
定義 nest route 級樣式
在 routes/xxx.yyy.tsx links 函數(shù)中引入 nest 樣式

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

這以文章和文章詳情作為嵌套路由，方便理解。

links 函數(shù)中 css 媒體查詢

media 屬性, 一般用于斷點(diǎn)，暗黑模式等

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 }] : []),
];

此時(shí)就可以直接使用 import './xxx.css' 文件，這與 webpack css-loader 提供的能力相當(dāng)了。