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

Question

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

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

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

Answer 1

使用Automatic Imports解决了这个问题。有了这个，我们可以访问每个 SFC 上的所有变量、mixin 等。

首先，您style-resources-loader使用命令安装vue add 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'),
      ]
    }
  }
}