如何在 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 中的任何地方使用，而無需導入文件。