一、CSS预处理器自动导入方案

在项目中如果我们想使用一个scss文件，就必须在组件中单独import该scss文件，

其实不用每个文件每次都单独引人css或scss文件，可以使用Vue-cli的CSS预处理器自动导入插件： style-resources-loader或vue-cli-plugin-style-resources-loader，就可以直接使用。

vue官方链接：CSS预处理器自动导入

比如在组件中使用定义变量的variable.scss文件，使用style-resources-loader插件后，在组件中可以不用引入scss文件，直接使用scss变量。

二、例如使用vue-cli-plugin-style-resources-loader为例

在组件中使用定义变量的variable.scss文件，使用style-resources-loader插件后，在组件中可以不用引入scss文件，直接使用scss变量。

具体步骤：

1. vue add style-resources-loader
2. 按照成功之后，会自动在vue.config.js中帮你生成配置代码，我们只需要在patterns写入我们需要引入的css文件路径即可：

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: ['./src/assets/styles/variable.scss'],//写入变量的scss文件
    },
  },
};

3. 设置完之后，在组件中就可以不用引入scss文件，直接使用scss变量$error-color了。