更新时间：2023-5-2
最简介版本
- 为 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 服务器上有较大的改动。当然也有一些版本依赖上发生了改变，一些问题的修复，想要看更加具体的查看:
