استخدام Sass¶

بدلاً من استخدام CSS العادي ، دعنا ننتقل إلى Saas:

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';

تثبيت محمل Saas :

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 <https://getbootstrap.com _ أن يقطع شوطًا طويلًا. تثبيته كحزمة:

1

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

أضف Bootstrap في ملف CSS (قمنا أيضًا بتنظيف الملف):

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 , Symfony form محليًا باستخدام سمة خاصة ، وتمكينه:

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 لا يمكن استخدامها مباشرة من قبل التطبيق. يجب أن يتم "تجميعها" أولاً.

في عملية التطوير ، يمكن إجراء تجميع الأصول عن طريق أمر encore dev:

1

$ symfony run yarn encore dev

بدلاً من تنفيذ الأمر في كل مرة يحدث فيها تغيير ، أرسله إلى الخلفية واتركه يشاهد تغييرات JS و CSS:

1

$ symfony run -d yarn encore dev --watch

خذ الوقت الكافي لاكتشاف التغييرات المرئية. إلقاء نظرة على التصميم الجديد في المتصفح.

يتم الآن تصميم نموذج تسجيل الدخول الذي تم إنشاؤه وكذلك تستخدم حزمة Maker فئات Bootstrap CSS افتراضيًا:

بالنسبة للإنتاج ، تكتشف SymfonyCloud تلقائيًا أنك تستخدم Encore وتجمع لك الأصول خلال مرحلة الإنشاء.