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

Question

在我的公司，我们没有在 Vue 文件中编写 css，我们更喜欢使用SCSS的旧方式。

问题是，我们最终需要在styles.scss创建新组件时在styles.scss中编写新的导入，这在更大的项目中确实让我感到styles.scss 。

不久前，当我在 React 中进行开发时，我在webpack.config文件中导入了名为node-sass-glob-importer模块， webpack.config调整了一下（ 您可以在此处查看）并且它起作用了 - 我可以像这样导入文件夹: @import "components/**";

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

导入node-sass-glob-importer或以其他方式做同样的事情有什么帮助吗？

Answer 1

如何使用https://github.com/nuxt-community/style-resources-module然后：

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

Answer 2

您可以像这样在 Nuxt 中使用node-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 用于诸如变量、mixin 和函数之类的东西，您希望在 SCSS 中的任何地方使用，而无需导入文件。