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

main.scss

I import a

_helpers.scss

_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?

Nuxt•13mo ago•

4 replies

Jay

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

main.scss

I import a

_helpers.scss

_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?

Use SASS function globally

Similar Threads

Use SASS function globally

Similar Threads

Similar Threads

Similar Threads