Vue.js 是現代化的JavaScript框架，它能夠幫助開發者輕松構建大型單頁應用程序。在Vue.js中，CSS可以被引入到Vue組件中。本文將介紹Vue.js如何引入CSS樣式。
1.在Vue.js中引入全局CSS文件
// 在index.html中引入 <head> <link rel="stylesheet" href="styles.css"> </head>
2.在Vue單文件組件中引入CSS文件
<template>
<div class="container">
<p>Some content here...</p>
</div>
</template>
<style scoped>
.container {
background-color: #ccc;
padding: 5px;
}
</style>在單文件組件中使用的樣式只在組件內部起作用，這樣可以避免全局污染。
3.在Vue.js中使用第三方CSS庫
// 在index.html中引入CSS庫的CDN鏈接 <head> <link rel="stylesheet" > </head>
如果需要在特定組件中使用第三方CSS庫中的樣式，可以將它們加入到scoped樣式中。
<template>
<div class="container">
<p class="library-text">Some content here...</p>
</div>
</template>
<style scoped>
.container {
background-color: #ccc;
padding: 5px;
}
.library-text {
color: #f00;
}
</style>總結
Vue.js可以輕松引入CSS，開發者可以使用全局CSS文件、在Vue單文件組件中引入CSS文件或使用第三方CSS庫。Vue.js的樣式作用域可以保證樣式不會全局污染。
下一篇vue如何外聯css