Vue 單文件組件是一種將 HTML、JavaScript 和 CSS 代碼組成一個獨立組件的技術(shù)，可以方便地管理和維護組件。在這種技術(shù)中，單獨的 CSS 文件通常會被編譯成 JavaScript 對象，并被打包到組件中。

Vue CLI 是一種常用的工具，可以方便地生成 Vue 項目。在 Vue CLI 創(chuàng)建的項目中，可以使用 Webpack 或者其他構(gòu)建工具來編譯單文件組件中的 CSS 代碼。

// HelloWorld.vue
<template>
<div class="hello">
{{ msg }}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
.hello {
font-size: 2rem;
color: blue;
}
</style>

在這個例子中，我們定義了一個名為“HelloWorld”的組件，它包含了一個模版、一個腳本和一個樣式。在樣式定義中，我們使用了 scoped 屬性來確保樣式只對當(dāng)前組件生效。

當(dāng)我們運行構(gòu)建工具時，它會將這個樣式編譯成類似如下的 JavaScript 對象：

{
"HelloWorld": {
"data-v-3f6076ed": "",
"hello": {
"font-size": "2rem",
"color": "blue",
},
}
}

這個對象會被打包到組件中，并在組件加載時被插入到頁面中。這樣，我們就可以方便地將 CSS 樣式和其他代碼一起管理，并隨著組件的加載而自動生效。