Stylify를 사용하여 Symfony에서 최적화된 CSS 작성

Twig 및 PHP 파일에 머물면서 HTML을 작성하고 최적화된 CSS를 받으세요. 파일 간 번거로운 전환에서 완벽한 코딩까지. 5분 안에 Symfony 웹 애플리케이션의 코딩 경험을 개선하는 방법을 알아보세요 🚀.

소개

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

Stylify를 사용하면 Twig 템플릿 또는 PHP 파일에 머물면서 선택기를 작성하고 각 페이지에 대해 개별적으로 가능한 가장 작은 CSS 청크를 얻을 수 있습니다 🤟.

Symfony 빠른 설정 🚀

시작하는 가장 쉬운 방법은 Symfony Skeleton 및 Webapp 패키지를 사용하는 것입니다.

composer create-project symfony/skeleton myproject/
cd myproject
composer require webapp
npm install

HpController 추가src/Controller/HpController.php

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;

class HomeController extends AbstractController
{
    #[Route('/')]
    public function home(): Response
    {
        return $this->render('hp.html.twig');
    }
}

및 홈페이지 템플릿templates/hp.html.twig .

{% extends "base.html.twig" %}
{% block body %} Hello World! {% endblock %}

Stylify 통합

Stylify 범용 플러그인을 설치합니다.

npm i @stylify/unplugin

webpack.config.js를 업데이트합니다. Stylify를 가져오고 플러그인 및 hp 스타일 항목을 추가합니다.

const { webpackPlugin } = require('@stylify/unplugin');
const path = require('path');
// ...
const layoutCssPath = './assets/styles/layout.css';
const homepageCssPath = './assets/styles/homepage.css';

Encore
  .addPlugin(webpackPlugin({
    transformIncludeFilter: (id) => id.endsWith('twig') || id.endsWith('.php'),
    bundles: [
        { outputFile: layoutCssPath, files: [
            './templates/base.html.twig'
        ]},
        { outputFile: homepageCssPath, files: [
            './templates/hp.html.twig'
        ]}
    ]
  }))
  .addStyleEntry('homepage', homepageCssPath)
  // ...

app.css의 assets/app.js를 'layout.css'로 변경하고 css 링크를 hp.html.twig에 추가합니다.

{% block stylesheets %}
  {{ parent() }}
  {{ encore_entry_link_tags('hp') }}
{% endblock %}

웹사이트 스타일링

설정이 완료되면 hp.html.twig를 편집합니다.

<div class="color:blue">Hello world!</div>

npm run dev를 실행합니다.

Stylify는 color:blue 선택기를 찾고 이에 대한 CSS를 생성합니다. .color\:blue{color:blue}를 homepage.css로 .

일부 코드는 종종 여러 페이지에서 재사용해야 합니다. 선택기에서 유틸리티 및 하드코딩된 단위로 인해 템플릿이 부풀어 오르는 것은 좋은 생각이 아닙니다. container 구성 요소와 일부 변수를 정의해 보겠습니다.
webpack.config.js를 열고 Stylify 플러그인 구성을 편집합니다.

.addPlugin(webpackPlugin({
  // ...
  extend: {
    bundler: {
      compiler: {
        variables: {
          containerSize: '800px',
          textColor: 'blue'
        },
        components: {
          container: 'max-width:$containerSize margin:0__auto'
        }
      }
    }
  }
}))

이제 base.html.twig를 업데이트할 수 있습니다.

<div class="container">{% block body %}{% endblock %}</div>

및 hp.html.twig

<div class="color:$textColor">Hello world!</div>

때로는 일부 구성 요소가 한 곳에서만 사용됩니다. webpack.config.js 에서 그것들을 정의하는 것은 이치에 맞지 않습니다. 구성 요소, 변수 등이 사용되는 파일에서 직접 정의할 수도 있습니다. Stylify에는 content options이 있습니다.
hp.html.twig에 단락 구성 요소를 추가해 보겠습니다.

{#
@stylify-components
  'text-block': `
    font-size:16px
    margin:12px__0
    md:margin:24px__0
  `
/@stylify-components
#}
...
{% block body %}
    ...
    <div class="text-block">First text</div>
    <div class="text-block">Second text</div>
{% endblock %}

프로덕션 빌드

프로덕션용 빌드를 실행할 때npm run build Stylify는 인식된 모든 선택기를 자동으로 변환하고 최적화된 CSS를 생성합니다.

최적화됨hp.html.twig :

{% block body %}
    <div class="_ghd5j">Hello World!</div>
    <div class="_hhvd">First text</div>
    <div class="_hhvd">Second text</div>
{% endblock %}

최적화된 HP CSS:

._ghd5j{color:blue}
._h0jma,
._hhvd{font-size:16px}
._gbu5r,._hhvd{margin:12px 0}
@media (min-width: 768px) {._bpb5,._hhvd{margin:24px 0}}

예제는 stylifycss.com website에서도 찾을 수 있습니다.

필요한 모든 구성

위의 예에는 Stylify가 할 수 있는 모든 것이 포함되어 있지 않습니다.

템플릿

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

스타일 global selectors

정의하다 custom screens

여백 왼쪽

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

기타

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

당신이 무슨 생각을하는지 제게 알려주세요!

나는 어떤 피드백에도 기뻐할 것입니다! Stylify은 여전히 ​​새로운 라이브러리이며 개선할 여지가 많습니다 🙂.


연락을 유지하다:
👉
👉
👉 stylifycss.com
👉
👉 medium.com/@8machy