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

Question

At my company we are not writing css in Vue files, we prefer to do it the old way with SCSS .

Problem is, we end up with a need of writing new import in styles.scss any time we create new component, and it really bugs me in bigger projects.

Not so long ago, when I have been developing in React, I imported module called node-sass-glob-importer in webpack.config file, tweaked a bit ( you can check here ) and it worked - I could have imported folder like this: @import "components/**";

In Nuxt, I only have nuxt.config.js file and I am lost a bit. I know how to extend some simple stuff there, but this seems to be more complicated.

Any help of importing node-sass-glob-importer or doing the same thing in some other way?

Answer 1

how about using https://github.com/nuxt-community/style-resources-module and than:

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

Answer 2

You can use node-sass-glob-importer in Nuxt like this:

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 is used for things like variables, mixins and functions that you want to use anywhere in your SCSS without having to import the files.