如何在 Vite 项目中安装 Mantine 并配置 postcss-preset-mantine【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine如果你要在一个 Vite 构建的 React 项目中引入 Mantine 组件库除了安装mantine/core等 npm 包之外还需要配置 PostCSS安装postcss-preset-mantine并创建postcss.config.cjs。这套配置让 Mantine 的样式以及文档示例中用到的样式函数、mixins能在你的项目里正常编译。本文基于 Mantine 官方文档中的 Vite 使用指南 和 postcss-preset-mantine 说明按“创建项目 → 安装依赖 → 配置 PostCSS → 接入 Provider → 启动验证”的顺序走一遍完整流程。创建或准备一个 Vite 项目如果你还没有项目按 Vite 官方的 getting started 指南创建应用官方文档给出的命令是# yarn yarn create vite # 或 npm npm create vitelatest如果你已经有现成的 Vite 项目跳过这一步直接在项目根目录继续下面的安装步骤即可。另有一条可选捷径Mantine 提供包含全部必需依赖和预配置含 PostCSS 配置、ColorSchemeScript 等的模板。Getting started 文档 说明模板默认只包含mantine/core和mantine/hooks需要其他mantine/*包时再按对应包的说明安装。本文以在 Vite 项目中手动安装为主线模板作为备选。安装 Mantine 包按你的项目实际需要选择包。最小可用组合是mantine/core核心组件库和mantine/hooks状态与 UI 管理 hooks官方文档默认安装的就是这两个# yarn yarn add mantine/core mantine/hooks # 或 npm npm install mantine/core mantine/hooks如果你还要用表单、日期、图表等能力需要追加对应包每个包还会带自己的额外依赖文档中列出的常用包及其附带依赖包括mantine/form—— 表单管理mantine/dates—— 日期输入与日历附带依赖dayjsmantine/charts—— 基于 Recharts 的图表附带依赖rechartsmantine/notifications、mantine/dropzone、mantine/carousel、mantine/lightbox等除mantine/hooks外其余mantine/*包都需要额外导入各自的样式文件例如import mantine/dates/styles.css;。安装并配置 PostCSS 插件在 Mantine 的 postcss-preset-mantine 文档 中官方说明该 preset 提供多个 CSS 函数和 mixin 帮助写样式“不是必须使用但强烈建议安装”is not required to use it, but is highly recommended且所有带样式的示例都默认你安装了它。它内置了三个 PostCSS 插件postcss-nested、带 Mantine 专属 mixin 的postcss-mixins以及一个提供em/rem函数的自定义插件。以 dev 依赖安装 PostCSS 相关包注意是三个一起装postcss-simple-vars用于定义断点变量# yarn yarn add --dev postcss postcss-preset-mantine postcss-simple-vars # 或 npm npm install --save-dev postcss postcss-preset-mantine postcss-simple-vars然后在项目根目录创建postcss.config.cjs文件内容按 Vite 指南 原样给出module.exports { plugins: { postcss-preset-mantine: {}, postcss-simple-vars: { variables: { mantine-breakpoint-xs: 36em, mantine-breakpoint-sm: 48em, mantine-breakpoint-md: 62em, mantine-breakpoint-lg: 75em, mantine-breakpoint-xl: 88em, }, }, }, };其中postcss-preset-mantine传空对象即可启用全部功能postcss-simple-vars里的五个mantine-breakpoint-*变量定义 Mantine 的响应式断点供 CSS 中使用例如mixin larger-than $mantine-breakpoint-sm这类 mixin 就依赖这些变量。接入样式导入与 MantineProvider修改应用根组件Vite 模板里通常是src/App.tsx导入已安装包的样式并用MantineProvider包裹应用// Import styles of packages that youve installed. // All packages except mantine/hooks require styles imports import mantine/core/styles.css; import { MantineProvider } from mantine/core; export default function App() { return MantineProvider{/* Your app here */}/MantineProvider; }如果之后追加安装了其他包在根文件按同样方式补一行对应包的styles.css导入即可mantine/hooks除外它不需要样式导入。启动开发服务器并验证配置完成后启动开发服务器npm run dev官方文档在此处给出的结论是 “All set!”——页面能正常渲染出 Mantine 组件的样式说明 Mantine 本体接入成功。要确认postcss-preset-mantine本身生效可以用它在 CSS 文件中的rem/em函数做核对。rem/em 文档 说明安装了postcss-preset-mantine后CSS 文件里才能使用rem和em函数其中16px 1remem值用于媒体查询其他位置用rem。官方给出的转换示例文档示例是.demo { font-size: rem(16px); media (min-width: em(320px)) { font-size: rem(32px); } }会被转换为.demo { font-size: calc(1rem * var(--mantine-scale)); media (min-width: 20em) { font-size: calc(2rem * var(--mantine-scale)); } }在项目某个 CSS 文件里写一个类似的rem(16px)用法在浏览器开发者工具里看到对应样式变成了calc(... * var(--mantine-scale))且媒体查询宽度换算为em就说明 preset 配置已正确加载如果 CSS 里rem()/em()未被转换先检查postcss.config.cjs是否位于项目根目录、拼写是否与上方配置一致。可选调整 preset 的 autoRem 与编辑器配置如果希望.css文件里所有像素值自动转成 rem可以在配置中开启autoRem选项module.exports { plugins: { postcss-preset-mantine: { autoRem: true, }, }, };文档明确列出autoRem不转换的情况使用时要有预期calc()、var()、clamp()、url()函数中的值content属性中的值包含rgb()、rgba()、hsl()、hsla()颜色的值media查询中的值媒体查询宽度仍需用em函数手动转换这些值想转 rem 时文档建议手动使用rem函数。另外Getting started 文档 提醒VS Code 默认不识别 postcss 语法需要在编辑器中安装 PostCSS Intellisense and Highlighting 扩展才能得到语法高亮并消除$variable相关的报错如果想要 CSS 变量自动补全还可以安装 CSS Variable Autocomplete 扩展并在项目根目录创建.vscode/settings.json把node_modules/mantine/core/styles.css加入cssVariables.lookupFiles列表。限制与下一步文档说明 PostCSS 的具体接入方式会因构建工具和框架不同而变化本文只覆盖 Vite 场景其他框架要查阅对应的 framework guide。preset 中的alpha、lighten、darken函数基于 CSScolor-mix文档指出该特性在部分较老的浏览器中不受支持用到这些函数时注意目标浏览器的覆盖范围。配置完成后文档建议进一步学习rem/em 与 px 单位、postcss-preset-mantine 提供的dark/light、smaller-than/larger-than等 mixin见 preset 文档 各节以及 Mantine 的响应式样式写法这些都是直接构建在本文完成的 PostCSS 配置之上的。【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考