vue-cli设置css不生效的解决方法

标准化配置文件中添加 CSS 相关的 webpack 配置

在使用 vue-cli 初始化一个项目时，它会默认生成一个标准化的配置文件：webpack.config.js 。如果需要更改 webpack 配置，可以通过在项目根目录下创建 vue.config.js 文件进行自定义配置。

我们可以在 vue.config.js 文件中配置相应的配置项，来解决 CSS 生效的问题。例如，添加 postcss-import 和 autoprefixer 插件，来处理 CSS 的自动化前缀和解决 import 语句的问题：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-import')(),
          require('autoprefixer')(),
        ]
      }
    }
  }
}

在单文件组件中引入 CSS 文件

在单文件组件中引入外部 CSS 文件时，需要使用相对路径。例如，在组件的