Question

在我公司，我们不是在Vue文件中编写CSS，我们更喜欢使用SCSS的 old 方法。

问题是，我们每次创建新组件时都需要在styles.scss中编写新导入，这确实使我陷入了更大的项目中。

不久前，当我在React中进行开发时，我在node-sass-glob-importer文件中导入了名为webpack.config的模块，进行了一些调整（you can check here）并起作用了-我本可以导入的文件夹是这样的：@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 中的任何位置使用，而无需导入文件。

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

2 个答案: