Stylify CSS로 더 빠르게 React.js 웹사이트 스타일 지정
14403 단어 csswebdevreactjavascript
더 쉽게 시작하려면 Stylify Stackblitz playground 🎮을(를) 확인하세요.
💎 스타일리시 소개
Stylify은 작성하는 내용에 따라 동적으로 CSS를 생성합니다. 구문은 css
property:value
와 유사합니다. 정의된 유틸리티는 구성 요소 선택기와 결합되며 프로덕션에서는 .color\:red,.button {color:red}
~ ._zx, ._ga{color:red}
와 같이 최소한으로 축소됩니다.Stylify를 사용하면 매우 작은 번들을 가져오고, 지연 로드된 CSS 청크를 추가로 생성하고, HTML 및 선택기 🤟를 작성하여 페이지 스타일을 지정할 수 있습니다.
🚀 React.js 설정
React.js를 설정하는 가장 쉬운 방법은 cli를 사용하는 것입니다.
yarn create vite app
react
또는 react-ts
선택cd app
이렇게 하면 기본 React.js 애플리케이션 골격을 얻을 수 있습니다.
🔌 Stylify 통합
NPM 또는 Yarn을 사용하여 @stylify/unplugin 패키지를 설치합니다.
yarn add @stylify/unplugin
npm i @stylify/unplugin
vite.config.js
를 열고 다음 콘텐츠를 복사합니다.import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { vitePlugin } from '@stylify/unplugin';
const stylifyPlugin = vitePlugin({
transformIncludeFilter: (id) => {
// Process only js, jsx, ts, tsx,
return id.endsWith('js') || id.endsWith('ts') || id.endsWith('tsx') || id.endsWith('jsx');
},
bundles: [{
// Create only one bundle for whole project => stylify.css
outputFile: './src/stylify.css',
files: ['./src/**/*.js', './src/**/*.ts', './src/**/*.jsx', './src/**/*.tsx'],
}],
extend: {
bundler: {
compiler: {
selectorsAreas: [
// To find class attributes
'(?:^|\\s+)className="([^"]+)"',
'(?:^|\\s+)className=\'([^\']+)\'',
'(?:^|\\s+)className=\\{`((?:.|\n)+)`\\}'
]
}
}
}
});
export default defineConfig({
plugins: [stylifyPlugin, react()]
});
마지막 단계에서
src/main.jsx
를 열고 stylify.css
에 경로를 추가합니다.// ...
import './stylify.css'
웹사이트 스타일링
아래 코드를
src/App.jsx
에 복사하고 yarn dev
를 실행하면 스타일이 지정된 Hello World! 🎉
텍스트를 얻게 됩니다.export default function App() {
return (
<div className="text-align:center margin-top:100px font-size:42px">
Hello World! 🎉
</div>
);
}
Stylify는 번들 파일의 마스크와 일치하는 파일의 모든 변경 사항을 감시하고 css를
src/stylify.css
로 생성합니다.예를 들어
color:blue
를 추가하면 CSS가 자동으로 업데이트됩니다 🎉.Stackblitz.com 💡에서 직접 Stylify를 사용해 보십시오.
구성품
유틸리티로 인해 템플릿이 너무 커지는 것을 방지하려면 다음을 사용할 수 있습니다.
content options (대괄호 없는 javascript 개체 예상) 또는 compiler config 을 통해 사용되는 파일에서 직접 구성 요소.
/*
stylify-components
container: 'max-width:800px margin:0__auto',
title: 'text-align:center margin-top:100px font-size:42px'
/stylify-components
*/
export default function App() {
return (
<div class="container">
<div className="title">Hello World! 🎉</div>
</div>
);
}
변수
깔끔한 코드가 마음에 든다면 선택기에서 하드코딩된 값도 피하고 싶을 것입니다. Variables은 구성 요소와 동일한 방식으로 정의할 수 있습니다.
/*
stylify-variables
titleFontSize: '42px',
containerWidth: '800px'
/stylify-variables
stylify-components
container: 'max-width:$containerWidth margin:0__auto',
title: 'text-align:center margin-top:100px font-size:$titleFontSize'
/stylify-components
*/
export default function App() {
return (
<div class="container">
<div className="title">Hello World! 🎉</div>
</div>
);
}
생산을 위한 건물
yarn build
+ yarn preview
를 실행하면 jsx 마크업이 다음과 같이 엉망이 됩니다.export default function App() {
return (
<div class="_7tcrv">
<div className="_88io">Hello World! 🎉</div>
</div>
);
}
CSS도 단축됩니다.
:root {--titleFontSize: 42px;--containerWidth: 800px;}
._bcda8,._7tcrv{max-width:800px}
._m0vnad,._7tcrv{margin:0 auto}
._1vegb8,._88io{text-align:center}
._jimir,._88io{margin-top:100px}
._qe393,._88io{font-size:42px}
필요한 모든 구성
위의 예에는 Stylify가 할 수 있는 모든 것이 포함되어 있지 않습니다.
ml:20px
와 같은 own macros 추가자세한 내용은 checkout the docs로 문의하십시오 💎.
연락을 유지하다:
👉
👉
👉 stylifycss.com
👉
👉 medium.com/@8machy
Reference
이 문제에 관하여(Stylify CSS로 더 빠르게 React.js 웹사이트 스타일 지정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/machy8/style-your-reactjs-website-faster-with-stylify-css-3m0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)