العودة   منتديات عميد التعريب > >

الملاحظات

English News & Topics مواضيع و أخبار عالمية متفرقة باللغة الإنجليزية Various international topics and news in English



إضافة رد
 
أدوات الموضوع انواع عرض الموضوع

قديم 2019-11-09, 01:59 AM   رقم المشاركة :1
معلومات العضو
عميد
Adding CSS to a Vue.js Project
إحصائية العضو





معدل تقييم المستوى: 9
fbi is on a distinguished road
المنتدى : English News & Topics
Icon (42) Adding CSS to a Vue.js Project


This is part of a series of articles starting with “Working with CSS in Vue.js”. Focus in this article is on different ways of adding CSS to a Vue.js project.

Separate Global Style Files

If you prefer to keep your style files separate from the .vue files and their style tags, similar to a workflow without a framework, this can be achieved. Setting up the style files this way means the styling will be applied to your template sections, but not available in component style tags.

Note: For example, if you create a SCSS variable in your style file, it will not be recognized if you try to use it within a component style tag. To get global styles available in component style tags, see the article about importing global styles in component style tags.

Set up your folder and file structure for your style files, for example src/styles/style.scss. If you use a structure with folders, _filename.scss and SCSS imports, this will work provided you have added SCSS support. (See the article “Working with CSS in Vue.js” on adding SCSS support.)

In your main.js file, import your styles below the Vue import:


import './styles/style.scss'
Style Tags in Vue Files

The default version of handling CSS is to write your styles in the vue file style tags.

Styles written in this way are global. Styles defined here are available in the project’s other .vue files.


/*…write your styles here*
Scoped Styletags

Scoping means adding data attributes to the different classes to keep them from leaking styles to one another. Scoping is similar to CSS Modules (read more about this in the article “CSS Modules in Vue.js”).

Add “scoped” to the component style tag in the .vue file:


/*add scoped styles here*
Style Cascading

If a child component has a class name that is shared by its parent component, the parent component style will cascade to the child. Read more about nesting with the deep selector in the documentation.

To target children of scoped parents, use:

.parent >>> child { /*styles*/ }

Which syntax works depends on which preprocessor is used. Possible syntaxes are also:

.parent /deep/ child{ /*styles*/ }

.parent ::v-deep child{ /*styles*/ }

Read more about this in the vue-loader documentation.

Setup

The starting code for this article is created by the Vue CLI command tool version 3.3.0 and Vue.js version 2.6.10. Note that both setup, plugins and framework are evolving. Changes will in time most certainly happen that make the techniques described in this post less relevant.

Articles in this series:

Part 1: Working with CSS in Vue.js
Part 2: Adding CSS to a Vue.js Project
Part 3: CSS Modules in Vue.js
Part 4: Importing Style Files to Component Style Tags in Vue.js




fbi غير متواجد حالياً   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
a, adding, component, css, files, project, style, styles, to, vuejs

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة



الساعة الآن 03:38 PM


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, vBulletin Solutions Inc.
Search Engine Optimisation provided by DragonByte SEO v2.0.42 (Pro) - vBulletin Mods & Addons Copyright © 2019 DragonByte Technologies Ltd.
منتديات عميد التعريب 2010 - 2019