如何集成自定义SASS文件和Vue3的SFC（Vue CLI）

Question

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

最后，这个过程应该如何进行？把SCSS和SFC的样式都拿去输出一个CSS文件？或使用样式加载器？我正在使用 Vue-CLI 4 和 Vue.js 3.

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

Answer 1

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

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

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

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

如何集成自定义SASS文件和Vue3的SFC（Vue CLI）

How to integrate custom SASS file and Vue3's SFC (Vue CLI)

css

sass

vue.js

vue-cli-4