support styleResources

[daniluk4000]

Versions

nuxt-vite: v0.0.28 nuxt: v2.15.2

Reproduction

https://github.com/daniluk4000/nuxt-vite-bug

Description

Problem was... Solved in #29, but actually not. Config is available in repo above.

Global SCSS import broken using style resources. Problem is caused by nuxt-vite, because if you remove it in nuxt.config.ts it works.

 ERROR  [vite:css] Undefined mixin.                                                                                                                                                                                                                            21:23:47
   ╷
67 │   @include mixin();
   │   ^^^^^^^^^^^^^^^^
   ╵
  layouts\default.vue 67:3  root stylesheet

[toniengelhardt]

I also get errors for missing scss vars that are loaded via styleResources.

Config:

styleResources: {
    scss: [
      'assets/scss/_functions.scss',
      'assets/scss/_themes.scss',
      'assets/scss/_mixins.scss',
      'assets/scss/_variables.scss',
    ],
  },

Error:

 ERROR  [vite:css] Undefined variable.                                                                        23:08:02
   ╷
50 │     max-width: $content-max-width;
   │                ^^^^^^^^^^^^^^^^^^
   ╵
  layouts/error.vue 50:16  root stylesheet

[danielgroen]

Also got the problem in my project!

[thebrownfox]

When you want to use variables in sfcs you have to define additionalData. nuxt.config.js

css: ["@/assets/scss/theme.scss", "@/assets/scss/main.scss"],
vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    sourceMap: true,
                    additionalData: `@import "@/assets/scss/all.scss"; @import "@/assets/scss/variables.scss"; `,
                },
            },
        }, 
    },

theme.scss

@import "variables.scss";

// Import Bulma and Buefy styles
@import "bulma/bulma.sass";
@import "buefy/src/scss/buefy";

Variables are available in main.scss already as it's loaded after theme.scss.

in case of webpack it was like this nuxt.config.js

css: ["@/assets/scss/theme.scss", "@/assets/scss/main.scss"],
    build: {
        loaders: {
            scss: {
                sourceMap: true,
                implementation: require("sass"),
                additionalData: `@import "~@/assets/scss/all.scss"; @import "~@/assets/scss/variables.scss"; `,
            },
        },
    }

theme.scss

@import "variables.scss";

// Import Bulma and Buefy styles
@import "~bulma/bulma.sass";
@import "~buefy/src/scss/buefy";

[thebrownfox]

@pi0 I believe you can close this issue as it works with right config without the module/plugin :fox_face:

[daniluk4000]

@pi0 I believe you can close this issue as it works with right config without the module/plugin 🦊

It should probably work fine with style-resources. The option you provided is a workaround IMO, thank you for that, but my will is to keep this issue as feature to support official Nuxt plugin.

[thebrownfox]

@pi0 I believe you can close this issue as it works with right config without the module/plugin fox_face

It should probably work fine with style-resources. The option you provided is a workaround IMO, thank you for that, but my will is to keep this issue as feature to support official Nuxt plugin.

It's not official (nuxt-community) AFAIK. This won't work IMHO unless it's updated as the plugin relies on webpack. Here: https://github.com/nuxt-community/style-resources-module/blob/master/lib/module.js#L75

[daniluk4000]

@pi0 I believe you can close this issue as it works with right config without the module/plugin fox_face

It should probably work fine with style-resources. The option you provided is a workaround IMO, thank you for that, but my will is to keep this issue as feature to support official Nuxt plugin.

It's not official (nuxt-community) AFAIK. This won't work IMHO unless it's updated as the plugin relies on webpack. Here: https://github.com/nuxt-community/style-resources-module/blob/master/lib/module.js#L75

Oh. You are right. Deal then, it's not nuxt-vite problem

[thebrownfox]

@daniluk4000 no problem. It's not something nuxt-vite can change even if we wanted to :shrug: I bet @pi0 would tell you the same :smile:

[toniengelhardt]

Thanks @thefoxie for the config! Might be worth it to add the example to https://vite.nuxtjs.org/misc/common-issues, since I guess it's a common issue.

[pi0]

Hi sorry i missed this issue. PR welcome for docs until supporting styleResources. But supporting it shouldn't be also hard. We have to merge options.styleResources and options.build.stylesResources and pass to vite options.

[thebrownfox]

@pi0 how would that work? I mean you cannot use webpack loaders, only override it and create the config above in the vite. If that's the case, I'd love to create the patch and send PR later tonight 😅

[daniluk4000]

Hi sorry i missed this issue. PR welcome for docs until supporting styleResources. But supporting it shouldn't be also hard. We have to merge options.styleResources and options.build.stylesResources and pass to vite options.

I will make a PR for docs later this day.

[daniluk4000]

https://github.com/nuxt/vite/pull/75

Here we go @pi0

[pisethx]

I'm using sass and vite shows this error. Can anyone help?

[plugin:vite:css] This file is already being loaded.
1 │ @import "~/assets/variables.sass"

// nuxt.config.js
  css: ['~/assets/variables.sass'],
  vite: {
    css: {
      preprocessorOptions: {
        sass: {
          sourceMap: true,
          additionalData: '@import "~/assets/variables.sass"\n',
        },
      },
    },
  }

[thebrownfox]

I'm using sass and vite shows this error. Can anyone help?

[plugin:vite:css] This file is already being loaded.
1 │ @import "~/assets/variables.sass"

// nuxt.config.js
  css: ['~/assets/variables.sass'],
  vite: {
    css: {
      preprocessorOptions: {
        sass: {
          sourceMap: true,
          additionalData: '@import "~/assets/variables.sass"\n',
        },
      },
    },
  }

You got wrong path try '@import "@/assets/variables.sass" and css: ['@/assets/variables.sass']

[thebrownfox]

Oh I see. Thought you had different error 😄 You load them twice and you don't need to. The vite option is there to make it available in sfc.

[daniluk4000]

I think I will edit the docs for that

[pisethx]

Oh I see. Thought you had different error 😄 You load them twice and you don't need to. The vite option is there to make it available in sfc.

Basically, if I remove the import in the vite option, it will just show sass error (undefined mixin or undefined variable). But if I add it, it shows the file is already loaded. Can someone help?

[thebrownfox]

If you use it somewhere in scss/sass files then import it there. There shouldn't be need for variables being imported like this. Take a look into my example. I use them in theme and then I import the theme. The vite option is there only to be able to use those variables in single file components during dev. But ofcourse (my guess) then webpack doesn't know about them if they are only in vite config and you should get error in build. Just my thoughts. Try to use it like I do and it will work.

[pisethx]

Oh Thank you. I misread it, now it no longer shows that same error.

[tmosmant]

I did the same as you @thefoxie and got the same error as @pisethx :

  css: ["@/assets/scss/theme.scss"],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          sourceMap: true,
          additionalData: `@import "@/assets/scss/variables.scss";`,
        },
      },
    },
  },

 ERROR  This file is already being loaded.                                                                           20:11:44
  ╷
1 │ @import "@/assets/scss/variables.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  assets/scss/variables.scss 1:9  root stylesheet

  ╷
  1 │ @import "@/assets/scss/variables.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  assets/scss/variables.scss 1:9  root stylesheet
  at Object._newRenderError (node_modules/sass/sass.dart.js:13537:19)
  at Object._wrapException (node_modules/sass/sass.dart.js:13374:16)
  at _render_closure1.call$2 (node_modules/sass/sass.dart.js:80373:21)
  at _RootZone.runBinary$3$3 (node_modules/sass/sass.dart.js:27269:18)
  at _FutureListener.handleError$1 (node_modules/sass/sass.dart.js:25797:19)
  at _Future__propagateToListeners_handleError.call$0 (node_modules/sass/sass.dart.js:26094:49)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4543:77)
  at _Future._completeError$2 (node_modules/sass/sass.dart.js:25927:9)
  at _AsyncAwaitCompleter.completeError$2 (node_modules/sass/sass.dart.js:25270:12)
  at Object._asyncRethrow (node_modules/sass/sass.dart.js:4292:17)
  at node_modules/sass/sass.dart.js:13233:20
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:4317:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:25291:12)
  at _awaitOnObject_closure0.call$2 (node_modules/sass/sass.dart.js:25283:25)
  at _RootZone.runBinary$3$3 (node_modules/sass/sass.dart.js:27269:18)
  at _FutureListener.handleError$1 (node_modules/sass/sass.dart.js:25797:19)

I'd love to use vite on my nuxt project but I'm a bit lost with this issue 😅

[lucpotage]

I have the same issue as you @tmosmant. I have no idea how to solve it. 😟

[chaos-zhu]

+1

[rafaelytakei]

I'm having the same problem with The file is already being loaded

[David-44Pixel]

+1. It is very useful to be able to use shared scss variables across all single component files.

[laisnegautier]

Having the same issue here too

[Usagino]

+1

[jiangwenyang]

+1

[Epskampie]

The reason for this error is very simple, but I don't see the solution yet. Using

vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/assets/scss/variables.scss";`,
        },
      },
    },
  },

Will prepend @import "@/assets/scss/variables.scss"; to every scss file being loaded. Also when it's loading variables.scss itself. Because this is impossible, you get the error.

[FengLin2016]

nuxt.config.js

  vite : { 
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './')
      }
    },
    ssr: false,
    css : { 
        preprocessorOptions : { 
            scss : { 
                sourceMap : false , 
                // additionalData : `@import "@/assets/mixin.scss";`,
                additionalData (source, fp) {
                  // All scss files ending with imports.scss
                  // will not re-import additionalData
                  if (fp.endsWith('variables.scss')) return source;
                  // Use additionalData from legacy nuxt scss options
                  return `@import "@/assets/mixin.scss"; ${source}`
                } 
            } , 
        } , 
    } ,  
 } ,