Vue.js 如何在Vue Nuxt项目中导入整个SCSS文件夹？

在我的公司，我们不是在Vue文件中编写css，我们更喜欢使用

SCSS

的老方法

问题是，每当我们创建新组件时，我们最终都需要以

样式.scss

编写新的导入，这在更大的项目中确实让我感到厌烦

不久前，当我在React中开发时，我在

webpack.config

文件中导入了名为

node sass glob importer

的模块，对其进行了一些调整（），结果成功了-我可以像这样导入文件夹：

@import“components/**”

在Nuxt中，我只有
Nuxt.config.js
文件，我有点迷路了。我知道如何扩展一些简单的东西，但这似乎更复杂

导入
节点sass glob importer
或以其他方式执行相同操作是否有帮助？
使用和而不是：

export default {
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/yourFolder/*.scss'
    ]
  }
}

您可以在Nuxt中使用
节点sass glob importer
，如下所示：

nuxt.config.js：

const globImporter = require('node-sass-glob-importer');

export default {
  ...
  css: [
    '~/assets/scss/global.scss'
  ],
  ...
  build: {
    extend(config, {loaders: {scss}}) {
      const sassOptions = scss.sassOptions || {};
      sassOptions.importer = globImporter();
      scss.sassOptions = sassOptions;
    }
  }
}

global.scss：

@import "./assets/scss/base/*";
@import "./assets/scss/components/*";

styleResources用于变量、混合和函数等，您可以在SCS中的任何位置使用这些变量、混合和函数，而无需导入文件。
谢谢，它可以工作，甚至可以用于节点\模块的外部模块。：）我只是想知道。我仍然需要
css:['~/assets/style/style.scss']，
才能让它工作，但为什么？该文件现在是空的，因为我将所有导入都移动到了nuxt.config.js。现在我意识到，每次创建新的scss文件时，我都需要手动重新启动服务器，因为它不会自动更新。这是目前唯一的缺点，我希望我可以在创建新文件时以某种方式强制服务器重新加载，就像我在nuxt.config.js中更改某些内容时所做的那样。请检查警告-如果您将模块用于样式，那么您使用的模块是错误的