更新时间：2023-5-2

访问地址：github.com/remix-run/r…

最简介版别

  • 为 V2 做准备
  • 安稳的 CSS 功用
  • PostCSS 功用
  • tailwindcss 功用
  • remix 开发服务器大修改

以上是省脑版别，以下会说的愈加详细一些。

安稳的 css 功用

  • CSS Modules
  • Vanilla Extract
  • CSS Side-Effect Imports
  • 通过 stabilizes 内置支撑 PostCSS 等

一下会选择一些进行讲解

Tailwindcss

一、remix 装备 remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  tailwind: true
};

二、装置并装备 tailwindcss：

npm install -D tailwindcss
npx tailwindcss init --ts
  • 大局设置 /app/tailwind.css 
@tailwind base;
@tailwind components;
@tailwind utilities;
  • 在 root.tsx 中加入到 style.css 中
import type { LinksFunction } from "@remix-run/node";
import styles from "./tailwind.css";
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
];

PostCSS

一、装备文件

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  postcss: true,
  // ...
};

二、装置插件

npm install -D autoprefixer

三、装备 postcss.config.js文件

module.exports = {
  plugins: {
    autoprefixer: {},
  },
};
// 运用 remix 供给的上下问题
module.exports = (ctx) => {
  return ctx.remix?.vanillaExtract
    ? {
        // PostCSS plugins for Vanilla Extract styles...
      }
    : {
        // PostCSS plugins for other styles...
      };
};

Vanilla Extract

  • 一、装置:
npm install -D @vanilla-extract/css
  • 二、装备:
module.exports = (ctx) => {
  return ctx.remix?.vanillaExtract
    ? {
        // PostCSS plugins for Vanilla Extract styles...
      }
    : {
        // PostCSS plugins for other styles...
      };
};
  • 三、运用
import { style } from "@vanilla-extract/css";
export const root = style({
  border: "solid 1px",
  background: "white",
  color: "#454545",
});
import * as styles from "./styles.css"; // Note that `.ts` is omitted here
export const Button = React.forwardRef(
  ({ children, ...props }, ref) => {
    return (
      <button
        {...props}
        ref={ref}
        className={styles.root}
      />
    );
  }
);
Button.displayName = "Button";
  • @vanilla-extract/css 运用起来比其他 css-in-js 愈加简略。

css bundle

React 社区中的许多常见 CSS 办法只有在捆绑 CSS 时才有或许，这意味着您在开发过程中编写的 CSS 文件将作为构建过程的一部分收集到一个单独的捆绑包中。

  • 一、装置
npm install @remix-run/css-bundle
  • 二、绑定整个应用程序中
// root.tsx
import type { LinksFunction } from "@remix-run/node"; 
import { cssBundleHref } from "@remix-run/css-bundle";
export const links: LinksFunction = () => {
  return [
    ...(cssBundleHref
      ? [{ rel: "stylesheet", href: cssBundleHref }]
      : []),
    // ...
  ];
};

开发服务器

一、 指令

remix dev # uses `remix-serve <serve build path>` as the app server
remix dev -c "node ./server.js" # uses your custom app server at `./server.js`

以上 -c 自定义指令发动服务， 默许运用 remix dev 运用 remix-serve 的指令。

二、应用服务器和谐

为了管理应用服务器，需求告知开发服务器应用服务器当前正在运用哪个服务器内部版别。这的作业原理是让应用服务器发送一条“我准备好了！”消息，并将 Remix 服务器构建哈希作为有效负载。

这是在 Remix App Server 中自动处理的，并通过调用官方 Remix 模板或在官方 Remix 模板中为您设置。broadcastDevReady``logDevReady

小结

Remix 1.16.0 版别主要为 v2 做准备，安稳了 css 相关的功用，在 remix 服务器上有较大的改动。当然也有一些版别依靠上发生了改动，一些问题的修正，想要看愈加详细的查看:

  • Releases remix-run/remix (github.com)
  • @remix-run/dev (CLI) | Remix