Css 如何集成自定义SASS文件和Vue3'；s SFC（Vue CLI）

我有一个SASS体系结构，我把我所有的风格都放在这里。我只有一个SASS文件，可以导入每个部分（包括变量、mixin等）。 我想知道如何在Vue提供给我们的每个SFC上访问所有这些样式，以便在我的SFC中使用混合、变量和更多

最后，这一过程应该如何进行？获取所有SCSS和SFC样式并输出一个CSS文件？还是使用样式加载器？ 我正在使用Vue CLI 4和Vue.js 3

以下是迄今为止我的体系结构的外观：

---

通过使用自动导入解决了此问题。通过这个，我们可以访问每个SFC上的所有变量、混合等

首先，使用命令

vue add style resources loader

安装

style resources loader

，这将询问您正在使用哪种预处理器

之后，您必须告诉加载程序在每个SFC上要导入的文件的位置。您可以通过更改vue.config.js来实现这一点（如果您还没有vue.config.js，请在项目的根目录下创建它）。 然后添加：

const path=require（'path'））
module.exports={
插件操作：{
“样式资源加载程序”：{
“预处理器”：“scss”，
“模式”：[
解析（uu dirname，'./src/sass/global.scss'），
]
}
}
}

尝试使用组件中的变量时是否存在问题？是的，确实存在问题。实际上，我在SASS文件夹中定义的样式都不起作用，但现在我已经解决了。嗯，它们通常不需要第三方插件。很可能在sass LoaderHanks中配置错误，是的，似乎建议自动导入（尽管它隐藏了要导入的文件，使配置复杂化，并且需要额外的包，可能需要更新，也可能不需要更新）。我的评论更多的是关于没有必要使用第三方工具来让您的SASS工作的想法。