1. 单文件组件中的样式
在 Vue 单文件组件中，你可以使用 <style> 标签来定义组件的样式。Vue CLI 默认支持使用 [scoped](https://vue-loader.vuejs.org/zh/guide/scoped-css.html) 样式，以确保样式只影响当前组件。
<template>
<div class="example">
<p>This is a paragraph.</p>
</div>
</template>
<style scoped>
.example {
color: red;
}
</style>
上面的例子中，.example 样式仅对当前组件起作用，并不会泄漏到其他组件。
2. 外部样式文件
在单文件组件中，你也可以使用 import 语句导入外部的样式文件：
<template>
<div class="example">
<p>This is a paragraph.</p>
</div>
</template>
<style src="./styles/example.css" />
上述代码中，example.css 是相对于当前组件的路径。Vue CLI 会在构建时将这些样式文件合并到最终的 CSS 中。
3. 全局样式
如果你有一些全局的样式，你可以在 src 目录下创建一个 main.css 或者 main.scss 等文件，然后在 main.js 中导入它：
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import './main.css'; // 导入全局样式文件
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount('#app');
4. 预处理器
Vue CLI 支持使用 CSS 预处理器，如 Sass、Less 和 Stylus。你可以选择在项目创建时配置或者后期手动添加相应的预处理器。例如，如果你想使用 Sass，可以运行以下命令：
vue add style-resources-loader
然后在 src 目录下创建一个 main.scss 文件，可以在这里定义全局的样式。
5. PostCSS
Vue CLI 默认配置中也包括了 [PostCSS](https://postcss.org/)，你可以在项目中使用它来处理 CSS。PostCSS 是一个强大的工具，可用于自动添加浏览器前缀、压缩 CSS 等操作。你可以通过配置文件（postcss.config.js）来自定义 PostCSS 的行为。
以上是一些关于 Vue CLI 中 CSS 的基本使用方法，根据项目需求，你可以选择相应的配置和样式组织方式。
转载请注明出处：http://www.zyzy.cn/article/detail/4830/Vue