🚀Stylify CSS로 Vue.js 웹사이트를 더 빠르게 스타일링하세요

Stylify + 뷰 + 비테. Stylify로 Vue 웹사이트의 스타일을 빠르게 지정하세요. 선택자, 구문 및 문서를 연구하지 마십시오. 순수한 CSS 구문을 사용하고 생산을 위한 고급 최적화로 생성된 CSS를 가져옵니다.

더 쉬운 시작을 위해 Stylify Stackblitz playground 🎮을 확인하세요.

💎 Stylify 소개

Stylify은 작성하는 내용에 따라 동적으로 CSS를 생성합니다. 구문은 cssproperty:value 와 유사합니다. 정의된 유틸리티는 구성 요소 선택기와 결합되며 프로덕션에서는 .color\:red,.button {color:red} ~ ._zx,._ga{color:red} 와 같이 최소한으로 축소됩니다.

Stylify를 사용하면 매우 작은 번들을 가져오고, 지연 로드된 CSS 청크를 추가로 생성하고, HTML 및 선택기 🤟를 작성하여 페이지 스타일을 지정할 수 있습니다.

🚀 Vue.js 설정

Vue를 설정하는 가장 쉬운 방법은 cli를 사용하는 것입니다.

달리다 yarn create vite app

선택 vue

그럼 cd app

이렇게 하면 기본 Vue 애플리케이션 스켈레톤을 얻을 수 있습니다.

🔌 Stylify 통합

NPM 또는 Yarn을 사용하여 @stylify/unplugin 패키지를 설치합니다.

yarn add @stylify/unplugin
npm i @stylify/unplugin

vite.config.js를 열고 다음 콘텐츠를 복사합니다.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { vitePlugin } from '@stylify/unplugin';

const stylifyPlugin = vitePlugin({
  transformIncludeFilter: (id) => id.endsWith('vue'),
  bundles: [
    {
      files: ['./src/**/*.vue'],
      outputFile: './src/assets/stylify.css',
    },
  ],
  extend: {
    bundler: {
      compiler: {
        // Match v-bind:class and :class attributes
        selectorsAreas: ['(?:^|\\s+)(?:v-bind)?:class="([^"]+)"'],
      },
    },
  },
});

export default defineConfig(() => ({
    plugins: [stylifyPlugin, vue()]
}));

마지막 단계에서 src/main.js를 열고 경로를 stylify.css에 추가합니다.

// ...
import './stylify.css'

웹사이트 스타일링

아래 코드를 src/App.vue에 복사하고 yarn dev를 실행하면 스타일이 지정된 Hello World! 🎉 텍스트를 얻게 됩니다.

<template>
  <div class="max-width:800px margin:0__auto">
    <h1 class="text-align:center margin-top:100px font-size:42px">Hello World!🤩</h1>
  </div>
</template>

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
-->
<template>
  <div class="container">
    <h1 class="title">Hello World!🤩</h1>
  </div>
</template>

변수

깔끔한 코드가 마음에 든다면 선택기에서 하드코딩된 값도 피하고 싶을 것입니다. 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
-->
<template>
  <div class="container">
    <h1 class="title">Hello World!🤩</h1>
  </div>
</template>

생산을 위한 건물

yarn build + yarn preview 를 실행하면 vue 마크업이 다음과 같이 엉망이 됩니다.

<template>
  <div class="_7tcrv">
    <h1 class="_88io">Hello World!🤩</h1>
  </div>
</template>

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가 할 수 있는 모든 것이 포함되어 있지 않습니다.

템플릿

에서 nested files을 매핑할 수 있습니다.

스타일 global selectors

정의하다 custom screens

여백 왼쪽

에 대해 ml:20px와 같은 own macros 추가

기타

자세한 내용은 checkout the docs로 문의하십시오 💎.


연락을 유지하다:

👉
👉
👉 stylifycss.com
👉
👉 medium.com/@8machy