Nuxt•3w ago

Playground with hmr for a nuxt module which contains scss

in my module, I import style with "nuxt.options.css.push(resolve('./runtime/assets/index.css'))" and also "import('../assets/optionalStyle.css')" but these files are scss files compiled, and so I have problems when I try to launch a playground to test my module with hmr because it tells me that it can't find the css files, logical since the scss files are not compiled (and I don't think I want them to be compiled at that time to have hmr on the style too), how can I solve my problem?

3 Replies

kapa.ai•3w ago

Hi @Mobyr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, there isn't enough specific information to fully answer your question about setting up a playground with HMR for a Nuxt module containing SCSS files. The documents don't cover the exact scenario you're describing with module development and SCSS compilation in a playground environment. However, I can offer some general guidance based on Nuxt's handling of preprocessors: 1. Nuxt supports SCSS out of the box, but you need to install the sass preprocessor:

npm install -D sass

npm install -D sass

2. For your module development, you might want to consider using the nuxi build-module command, which is designed for building Nuxt modules before publishing. This command uses @nuxt/module-builder to generate a dist directory with the full build for your module. Nuxt Module Builder 3. For handling SCSS in your module, you might need to adjust your Nuxt configuration to properly process SCSS files. This could involve setting up the css property in your Nuxt config and potentially using the vite.css.preprocessorOptions for SCSS:

export default defineNuxtConfig({
  css: ['~/assets/scss/main.scss'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/scss/_variables.scss" as *;'
        }
      }
    }
  }
})

export default defineNuxtConfig({
  css: ['~/assets/scss/main.scss'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/scss/_variables.scss" as *;'
        }
      }
    }
  }
})

Nuxt Styling Documentation 4. For HMR specifically, Nuxt uses Vite by default which should handle HMR for CSS/SCSS. However, the exact setup for a module playground isn't covered in the provided knowledge sources. To solve your specific problem, you might need to adjust how you're importing the SCSS files in your module and ensure that your playground is set up to properly compile SCSS. However, without more specific information about your module structure and playground setup, it's difficult to provide a more precise solution. I recommend consulting the official Nuxt module development documentation or seeking help from the Nuxt community forums for more specific guidance on setting up a playground with HMR for module development involving SCSS files. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@156638258573475840> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MobyrOP•3w ago

I found what I needed: await resolvePath('...', { extensions: ['.css', '.scss'] })

Gaming

Programming

Playground with hmr for a nuxt module which contains scss

Did you find this page helpful?