在React.js中使用Stylify CSS
React.js是一个用于构建用户界面的JavaScript库。
Stylify可以通过各种方式与React.js一起使用:
- 使用Vite.js(这个例子)
- Next.js
如何将Stylify CSS与React.js和Vite.js整合起来
下面的例子适用于Vite - React.js模板。然而,你可以使用下面的例子,并为Svelte、Vue和其他任何你使用的框架进行配置。
首先,使用NPM或Yarn安装@stylify/unplugin软件包:
npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin
接下来在vite.config.js
中添加以下配置:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { stylifyVite } from '@stylify/unplugin';
const stylifyPlugin = stylifyVite({
bundles: [{outputFile: './src/stylify.css', files: ['./src/**'] }],
// 可选
//编译器配置信息 https://stylifycss.com/en/docs/stylify/compiler#configuration
compiler: {
// https://stylifycss.com/en/docs/stylify/compiler#variables
variables: {},
// https://stylifycss.com/en/docs/stylify/compiler#macros
macros: {},
// https://stylifycss.com/en/docs/stylify/compiler#components
components: {},
// ...
}
});
export default defineConfig({
plugins: [stylifyPlugin, react()]
});
现在你可以将生成的src/stylify.css
的路径添加到src/main.js
文件中:
import './stylify.css';
现在运行yarn dev
。src/stylify.css
文件将被生成。
配置
有很多的选项你可以配置: