vue中如何配置css

在 Vue 中配置 CSS 有两种方式：全局配置和组件内配置。

1. 全局配置

在 Vue 项目中，可以使用 `vue.config.js` 文件来配置全局 CSS。在该文件中添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 配置css
      },
      postcss: {
        // 配置postcss
      }
    }
  }
}

在 `loaderOptions` 中可以配置 `css` 和 `postcss`。例如，如果要使用 `sass`，可以这样配置：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/_variables.scss";`
      }
    }
  }
}

2. 组件内配置

可以在组件内使用 `style` 标签来配置 CSS。例如：

<template>
  <div class="example"></div>
</template>

<script>
export default {
  name: 'Example',
}
</script>

<style>
.example {
  color: red;
}
</style>

在以上代码中，`<style>` 标签中的 CSS 只会应用到该组件中。