Uso de Stylify CSS en SolidJS
SolidJS es un framework de reactividad simple y performante para la construcción de interfaces de usuario.
Pruébalo en StackBlitzCómo integrar Stylify CSS con SolidJS y Vite.js
El ejemplo de abajo funciona con la plantilla Vite - SolidJS. Sin embargo, puedes utilizar el ejemplo de abajo y configurarlo para React.js, Vue y cualquier otro framework que utilices.
Primero, instala el paquete @stylify/unplugin usando NPM o Yarn:
npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin
A continuación añade la siguiente configuración en vite.config.js
:
import { defineConfig } from 'vite';
import { stylifyVite } de '@stylify/unplugin';
import solidPlugin from 'vite-plugin-solid';
const stylifyPlugin = stylifyVite({
bundles: [{ outputFile: './src/stylify.css', files: ['./src/**/*.jsx'] }],
// Opcional
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, solidPlugin()],
server: {
port: 3000,
},
build: {
target: 'esnext',
},
});
Ahora puedes añadir la ruta del src/stylify.css
generado en el fichero src/index.js
:
import './stylify.css';
Ahora ejecuta yarn dev
. Se generará el archivo src/stylify.css
.
Configuración
Hay muchas opciones que puedes configurar:
¿Y ahora qué?
- 🚀 Aprende cómo empezar
- 🔌 Echa un vistazo a configuración de @stylify/unplugin
- ⚙️ O configura Stylify directamente: