如何集成自定义 SASS 文件和 Vue3 的 SFC (Vue CLI)答案

【问题标题】：How to integrate custom SASS file and Vue3's SFC (Vue CLI)如何集成自定义 SASS 文件和 Vue3 的 SFC (Vue CLI)
【发布时间】：2021-03-08 20:09:21
【问题描述】：

我有一个 SASS 架构，我在其中放置了所有样式。我只有一个 SASS 文件可以导入每个部分（包括变量、mixin 等）。我想知道如何访问 Vue 提供给我们的每个 SFC 上的所有这些样式，这样我就可以在我的 SFC 中使用 mixins、变量等。

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

这是我的架构到目前为止的样子：

【问题讨论】：

尝试使用组件中的变量时是否出现问题？
是的，是的。实际上，我在 SASS 文件夹中定义的所有样式都不起作用，但现在我已经解决了。
嗯，它们通常不需要 3rd 方插件。很可能在 sass 加载器中配置错误
cli.vuejs.org/guide/css.html#automatic-imports
谢谢，是的，似乎 that tool 建议用于自动导入（尽管它隐藏了正在导入的文件，使配置复杂化，并且需要一个额外的包，可能或可能无法获得更新）。我的评论更多的是关于不需要使用 3rd 方工具来让你的 SASS 工作的想法。

标签： css vue.js sass vue-cli-4

【解决方案1】：

使用自动导入解决了这个问题。这样我们就可以访问每个 SFC 上的所有变量、mixin 等。

首先，您使用命令vue add style-resources-loader 安装style-resources-loader，这将询问您正在使用哪种预处理器。

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

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'preProcessor': 'scss',
      'patterns': [
        path.resolve(__dirname, './src/sass/global.scss'),
      ]
    }
  }
}

【讨论】：