تعرف على كيفية تمكين SCSS في مكونات Vue.js
باستخدامVue CLIيمكنك تمكين "معالجات CSS المسبقة" ويمكنك اختيار المعالجات التي تريد تمكينها:
إذا كنت تستخدم مشروعًا لا يعتمد على Vue CLI ، أو مشروعًا تمت تهيئته باستخدام Vue CLI ولكنك لم تقم بإضافة دعم المعالج المسبق لـ CSS ، فيمكنك إضافته لاحقًا باستخدام:
npm install --save-dev node-sass sass-loader
داخل مكونات التطبيق الخاص بك ثم يمكنك استخدام
<style lang="scss">
...
</style>
وأضف كود SCSS الخاص بك هناك.
إذا كنت تريد الاحتفاظ برمز SCSS الخاص بك في ملف خارجي ، فيمكنك القيام بذلك ، واستيراده فقط في جزء البرنامج النصي من المكون الخاص بك:
<script>
import '../public/style.scss'
//…
</script>
تحميل مجانيكتيب Vue
المزيد من دروس vue:
- نظرة عامة على Vue.js
- واجهة سطر الأوامر Vue.js: تعرف على كيفية استخدامها
- أداة Vue.js DevTools
- تكوين VS Code لتطوير Vue
- أنشئ تطبيقك الأول باستخدام Vue.js
- مكونات الملف الفردي Vue.js
- قوالب Vue.js والاستيفاءات
- توجيهات Vue.js
- طرق Vue.js
- خصائص Vue.js المحسوبة
- تصميم مكونات Vue.js باستخدام CSS
- مراقبو Vue.js
- طرق Vue مقابل المراقبون مقابل الخصائص المحسوبة
- مرشحات Vue.js
- مكونات Vue.js
- فتحات Vue.js
- الدعائم المكون Vue.js
- أحداث Vue.js
- اتصالات مكونات Vue.js
- Vuex ، مدير ولاية Vue.js
- Vue ، استخدم مكونًا داخل مكون آخر
- Vue ، كيفية استخدام الخاصية كاسم للفئة
- كيفية استخدام SCSS مع Vue.js Single File Components
- استخدام Tailwind مع Vue.js
- جهاز التوجيه Vue
- إظهار مكون Vue ديناميكيًا
- ورقة الغش Vue.js
- قم بتخزين بيانات Vue على التخزين المحلي باستخدام Vuex
- كيفية تطبيق فئة ديناميكيًا باستخدام Vue
- كيفية استخدام Vue
- Vue ، لماذا يجب أن تكون البيانات دالة
- Roadmap to become a Vue.js developer in 2020