在vite中使用stylex

在2023年 Meta(FaceBook)开源了stylexjs,一个原子化的 css 框架,关于原子化的好处我也不想阐述过多这与本篇的内容无过多关联。 本文也不会探讨过多stylexjs的细节。

开始 #

正如文章标题我对vue比较熟悉这里就用vue+vite的方式搭建一个简单的项目

$ yarn add vite @stylexjs/stylex vite-plugin-stylex-dev vue @vitejs/plugin-vue -D

为什么是stylex-dev #

截止文章的时间来看stylex官方并没有提供一个官方的插件而是选择让社区去开发插件因为 vite 插件的特殊性导致很难有一个通用的插件而vite-plugin-stylex-dev则是一个试验品。 相比vite-plugin-stylex他更具插件美学并且能适配绝大部分framework。

import vue from "@vitejs/plugin-vue";
import { stylexPlugin } from "vite-plugin-stylex-dev";
export default defineConfig({
  plugins: [vue(), stylexPlugin()],
});

这样我们就能愉快的使用stylex了。注意在 stylex 需要在顶层定义这意味着我们在vue setup语法下需要 2 个script标签

<template>
  <div v-bind="styles.box"></div>
</template>

<script setup>
import { attrs } from "stylexjs";
</script>
<script>
const styles = attrs({
  box: {
    display: "flex",
  },
});
</script>

结语 #

这篇文章对vite stylex搭建做了一个简单的描述更多的使用细节还得参照官方文档本文只起到一个抛砖引玉的作用。