亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

You can add CSS to a Vue component in several ways, depending on whether you're using the Options API or Composition API , and whether you're working with Single File Components (SFCs) or inline styles. Here are the most common and practical methods:

1. Using <style></style> in a Single File Component (SFC)

This is the most common way when working with .vue files.

 <template>
  <div class="my-component">
    <h2>Welcome</h2>
    <p>This is styled with internal CSS.</p>
  </div>
</template>

<script>
export default {
  name: &#39;MyComponent&#39;
}
</script>

<style>
.my-component {
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
}

.my-component h2 {
  color: #333;
}
</style>

This applies global styles within the component.

2. Scoped CSS (Recommended for Component Isolation)

To prevent styles from leaking to other components, use the scoped attribute:

 <style scoped>
.my-component {
  padding: 20px;
  background-color: #eef;
}

/* This style only affects this component */
h2 {
  color: blue;
}
</style>

Vue adds a unique attribute (like data-v-f3f3eg9 ) to elements and compiles the CSS accordingly, so styles don't affect other components.

3. Using CSS Modules (For Local-by-Default Styles)

CSS Modules scope styles locally by default and let you import them as objects.

 <template>
  <div :class="$style.container">
    <h2 :class="$style.title">Hello</h2>
  </div>
</template>

<style module>
.container {
  padding: 16px;
  background: #fff;
  border: 1px solid #ddd;
}

.title {
  font-size: 1.5em;
  color: green;
}
</style>

This is great for avoiding naming conflicts and integrating with JavaScript.

4. Importing External CSS Files

You can import CSS files directly in the <style> block or in the <script> section.

Option A: Import in <style>

 <style scoped>
@import &#39;@/assets/styles/component.css&#39;;
</style>

Option B: Import in <script> (useful for utility or global styles)

 <script>
import &#39;@/assets/styles/global.css&#39;

export default {
  name: &#39;MyComponent&#39;
}
</script>

This is common for global resets or design system styles.

5. Inline Styles with :style

For dynamic styles, bind styles directly in the template:

 <template>
  <div :style="{ color: textColor, fontSize: fontSize &#39;px&#39; }">
    Styled inline
  </div>
</template>

<script>
export default {
  data() {
    return {
      textColor: &#39;red&#39;,
      fontSize: 16
    }
  }
}
</script>

You can also pass an array or computed styles.

6. Using <style lang="scss"> (Preprocessors)

If you're using Sass/SCSS, Less, or Stylus:

 <style scoped lang="scss">
.my-component {
  background: #fff;
  border: 1px solid #ccc;

  h2 {
    color: darken(blue, 20%);
  }
}
</style>

Make sure to install the corresponding webpack loader (eg, sass-loader , node-sass ).

Quick Tips:

• Use scoped to avoid style pollution.
• Use module for strict, modular styling.
• Prefer external .scss or .css files for shared styles.
• Combine scoped and module if needed (though usually one suffices).
• For global styles (like resets), apply them once in main.js or App.vue .

Basically, it's flexible — pick the method that fits your project's scale and architecture. For most component-based apps, scoped styles are the sweet spot.

以上是如何將CSS添加到VUE組件中？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！