Nuxt•4w ago

Use SASS function globally

I am currently building a module and I want to use a function that I can use globally in any compoent of my Nuxt Module. In my module.ts I currently have this:

const runtimeDir = resolve('./runtime')
const treeviewStyle = './assets/style/main.scss'
nuxt.options.css.unshift(resolve(runtimeDir, treeviewStyle))

const runtimeDir = resolve('./runtime')
const treeviewStyle = './assets/style/main.scss'
nuxt.options.css.unshift(resolve(runtimeDir, treeviewStyle))

and in the main.scss I import a _helpers.scss which has a function

// convert px to rem
@function toRem($pixels) {
   @return #{$pixels/16}rem;
}

// convert px to rem
@function toRem($pixels) {
   @return #{$pixels/16}rem;
}

When I use this function in my component it is not working. How can I make it work?

2 Replies

kapa.ai•4w ago

Hi @Jay. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use SASS functions globally in your Nuxt module, you need to make some adjustments to your configuration. Based on the information provided in the knowledge sources, here's how you can make your SASS function work globally: 1. First, make sure you're using the correct configuration in your nuxt.config.ts file. Instead of modifying nuxt.options.css directly in your module, you should use the css option in the Nuxt configuration. 2. In your nuxt.config.ts, add the following:

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

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

This configuration does two things: - It includes your main SCSS file globally. - It uses the additionalData option to inject your helpers file into every component, making your functions available globally. 3. Make sure your _helpers.scss file is located in the correct path (assets/style/_helpers.scss). 4. In your components, you should now be able to use the toRem function directly without importing it. By following these steps, your SASS function should be available globally in any component of your Nuxt module. It's worth noting that this approach is based on Nuxt 3's handling of SASS. If you're using a different version, the configuration might vary slightly. Nuxt Configuration provides more information on configuring Nuxt, and CSS Configuration specifically addresses CSS-related settings. Remember that when working with SASS in Nuxt, it's generally better to let Nuxt handle the compilation rather than using external watchers or compilers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Gaming

Programming

Use SASS function globally

Did you find this page helpful?