解决sass-loader引入全局样式文件报错

vue 项目，使用 sass-loader 引入全部变量的时候报错

css: {
        loaderOptions: {
            sass: {
                data: `@import "@/assets/styles/theme.scss";`,
            }
        }
    }

报错如下：

第一次看到此报错较为懵逼，不知道从何解决。但是静下心自己阅读报错原因是，sass-loader 没法识别配置选项，因为这个项目是参考 vue-cli3配置的，所有就立即查看 vue-cli3 的官方文档，找到了下面这句话

可参考sass-loader

然后又立即查看自己项目的 sass-load 的版本，发现正好是 v8版本的

image.png

所以修改配置如下：

css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/styles/theme.scss";`,
            }
        }
    }

项目就立即没有报错了。
总结：这个错误的解决过程，让我更加坚定的是，遇到问题，一定要仔细查阅官方文档。答案都在文档里。