كيفية استخدام SCSS مع Vue.js Single File Components

تعرف على كيفية تمكين SCSS في مكونات Vue.js

باستخدامVue CLIيمكنك تمكين "معالجات CSS المسبقة" ويمكنك اختيار المعالجات التي تريد تمكينها:

Vue CLI

إذا كنت تستخدم مشروعًا لا يعتمد على 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:


Tech Wiki على الإنترنت!