raboni-styles
v2.3.4
Published
Reusable SCSS mixins and variables for styling applications
Downloads
184
Readme
Raboni Styles
Raboni Styles é um conjunto de classes, componentes, icons, mixins e variáveis SCSS reutilizáveis para estilizar aplicações de forma consistente.
Instalação
npm install raboni-styles
## Config your vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';
import { viteStaticCopy } from 'vite-plugin-static-copy';
export default defineConfig({
plugins: [
react(),
viteStaticCopy({
targets: [
{
src: 'node_modules/raboni-styles/scss/icons/fonts/*',
dest: 'assets/fonts'
}
]
})
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'raboni-styles': path.resolve(__dirname, 'node_modules/raboni-styles/scss/main.scss'),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "raboni-styles" as *;`,
},
},
},
})
##Example use mixins flex
.card{
@include flex();
@include flex-row();
@include flex-align-center();
gap:1rem;
border: 1px solid #ccc;
border-radius: 10px;
}
##Example use classes flex
const Example = () => {
return (
<div className='frow-center fgap-10'>
Example
</div>
)
}
export default Example