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

.PrimaryButton {
  
}

[data-primary-button] {
  
}

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

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

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

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

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

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

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