vue css-loader,vue中css,vue css scope,vue-style-loader!css-loader,vue css import,vue操作css
Vue CLI 是一个基于 Vue.js 的脚手架工具，用于快速构建 Vue.js 应用程序。在 Vue CLI 中，CSS 相关配置包括预处理器、全局样式和 CSS 模块化等内容。

1. 预处理器：
Vue CLI 可以通过安装相应的依赖支持多种 CSS 预处理器，如 Sass、Less 和 Stylus。例如，安装 Sass 依赖后，在项目中编写 .scss 样式文件，然后在组件中通过 lang="scss" 属性来使用：

html
<template>
<div class="user-profile">
<h2>{{ name }}</h2>
<p>{{ bio }}</p>
</div>
</template>

<style lang="scss">
.user-profile {
background-color: $primary-color;

h2 {
font-size: 24px;
color: $text-color;
}

p {
font-size: 16px;
color: $text-color-light;
}
}
</style>


2. 全局样式：
在 Vue CLI 中，可以通过在 src/assets 目录下创建全局样式文件（如 global.css）并在 main.js 中引入来设置全局样式。例如：

css
/* src/assets/global.css */
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

/* main.js */
import Vue from 'vue'
import App from './App.vue'
import './assets/global.css'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')


3. CSS 模块化：
在 Vue CLI 中，默认开启了 CSS 模块化，可以通过给 style 标签添加 module 属性来使用。在模块化的样式中，每个类名都会被自动转换为唯一的哈希值，避免了全局作用域的问题。例如：

html
<template>
<div class="user-profile">
<h2>{{ name }}</h2>
<p>{{ bio }}</p>
</div>
</template>

<style module>
.user-profile {
background-color: var(--primary-color);

h2 {
font-size: 24px;
color: var(--text-color);
}

p {
font-size: 16px;
color: var(--text-color-light);
}
}
</style>


注意到这里使用了 CSS 变量来定义颜色值，因此需要在全局样式文件中声明这些变量：

css
/* src/assets/global.css */
:root {
--primary-color: #007bff;
--text-color: #333;
--text-color-light: #666;
}