استفاده از Sass¶

به جای استفاده از CSS خام، بیایید از Sass بهره بگیریم:

1

$ mv assets/css/app.css assets/css/app.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -6,7 +6,7 @@
  */

 // any CSS you import will output into a single css file (app.css in this case)
-import '../css/app.css';
+import '../css/app.scss';

 // Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
 // import $ from 'jquery';

بارگیرنده‌ی Sass را نصب کنید:

1

$ yarn add node-sass "[email protected]^7.0.1" --dev

و بارگیرنده‌ی Sass را در webpack فعال کنید:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -54,7 +54,7 @@ Encore
     })

     // enables Sass/SCSS support
-    //.enableSassLoader()
+    .enableSassLoader()

     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()

از کجا می‌دانستم که باید چه بسته‌هایی را نصب کنم؟ اگر سعی می‌کردیم که دارایی‌ها را بدون این بسته‌ها بسازیم، Encore پیغام خطای مناسبی به ما می‌داد که پیشنهاد می‌کرد، فرمان yarn add برای نصب وابستگی‌های لازم برای بارگرفتن فایل‌های .scss الزامی است.

بهره‌گیری از Bootstrap¶

برای شروع با پیشفرض‌های خوب و ساخت یک وب‌سایت واکنشی، یک چارچوب CSS همچون Bootstrap می‌تواند بسیار مفید باشد. آن را به عنوان یک بسته نصب کنید:

1

$ yarn add bootstrap jquery popper.js bs-custom-file-input --dev

Bootstrap را در فایل CSS الزام (require) کنید (ما همچنین فایل را تمیزکاری کرده‌ایم):

1
2
3
4
5
6
7

--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -1,3 +1 @@
-body {
-    background-color: lightgray;
-}
[email protected] '~bootstrap/scss/bootstrap';

همین کار را برای فایل JS انجام دهید:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -7,8 +7,7 @@

 // any CSS you import will output into a single css file (app.css in this case)
 import '../css/app.scss';
+import 'bootstrap';
+import bsCustomFileInput from 'bs-custom-file-input';

-// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
-// import $ from 'jquery';
-
-console.log('Hello Webpack Encore! Edit me in assets/js/app.js');
+bsCustomFileInput.init();

سیستم فرم سیمفونی به صورت بومی از Bootstrap به همراه یک پوسته‌ی ویژه پشتیبانی می‌کند. آن را فعال کنید:

1
2

twig:
    form_themes: ['bootstrap_4_layout.html.twig']

زیباسازی HTML¶

حالا آماده هستیم تا اپلیکیشن را زیباسازی کنیم. فایل فشرده‌ی را بارگیری کرده و آن را در پوشه‌ی اصلی پروژه از حالت فشرده خارج کنید:

1
2
3

$ php -r "copy('https://symfony.com/uploads/assets/guestbook.zip', 'guestbook.zip');"
$ unzip -o guestbook.zip
$ rm guestbook.zip

به قالب‌ها نگاهی بیاندازید، ممکن است یکی‌دو حقه در مورد Twig بیاموزید.

ساخت دارایی‌ها¶

یک تغییر اساسی هنگام استفاده از Webpack این است که فایل‌های CSS و JS به صورت مستقیم در اپلیکیشن قابل استفاده نیستند. آن‌ها ابتدا نیاز دارند که «compile» شوند.

در محیط توسعه، کامپایل‌کردن دارایی‌ها می‌تواند از طریق فرمان encore dev انجام شود:

1

$ symfony run yarn encore dev

به جای اینکه با هربار تغییر، فرمان را اجرا کنیم، آن را به پس‌زمینه بفرستید و اجازه دهید تا تغییرات JS و CSS را دنبال کند:

1

$ symfony run -d yarn encore dev --watch

برای کشف تغییرات بصری، زمان بگذارید. در مرورگر نگاهی به طراحی جدید داشته باشید.

حالا فرم ورود به سایتِ تولیده‌شده، زیباسازی شده است چرا که باندل Maker به صورت پیشفرض از کلاس‌های CSS موجود در Bootstrap استفاده می‌کند:

در محیط عمل‌آوری، SymfonyCloud به صورت خودکار تشخیص می‌دهد که شما از Encore استفاده می‌کنید و در طول فاز ساخت، دارایی‌ها را برای شما کامپایل می‌کند.