nuxt-scss-to-js

Load SCSS Variables into Nuxt instance for use in Templates/Scripts.

📖 Release Notes

Usage

//   /assets/scss/variables.scss 
$primary: #0000ff;
$secondary: #00ff00;
$warning: #ff0000;

<template>
  This themes primary color is {{$scss.primary}}!
  <Component :color="$scss.primary"/>
</template>

Setup

1. Add nuxt-scss-to-js dependency to your project

yarn add nuxt-scss-to-js # or npm install nuxt-scss-to-js 

1. Add nuxt-scss-to-js to the buildModules section of nuxt.config.js

{
  buildModules: [
    // Simple usage
    'nuxt-scss-to-js',
 
    // With options
    ['nuxtScssToJs', { /* module options */ }]
  ]
}

Options

namespace

• Type: String
• Default: scss

The name under which the scss variables will be accessible inside nuxt.

$scss.primary // '#0000ff'
$scss.secondary // '#00ff00'
$scss.warning // '#ff0000'

path

• Type: String
• Default: '~/asstets/scss/variables.scss'

The path to your scss file with variables.

generate

• Type: Boolean
• Default: false

Will generate a scss.js file in the same directory as path. This file can be used to explicitly import scss variables. Useful for work with other plugins/modules. Name of file depends namespace option

Result

//path directory
 
variables.scss
scss.js

Use

import variables from '~/assets/scss/scss.js'

inject

• Type: Boolean
• Default: true

By default the vue instance will be injected with the $scss object containing all scss variables. This can be turned off. Useful in conjuntion with the option generate, to only import variables where necessary.

Examples:

Example Default Settings

// nuxt.config.js
buildModules: [
  'nuxt-scss-to-js'
]

//   /assets/scss/variables.scss 
$primary: #0000ff;

<template>
  This themes primary color is {{$scss.primary}}!
  <Component :color="$scss.primary"/>
</template>

Example with Generate and Namespace

// nuxt.config.js
buildModules: [
'nuxt-scss-to-js',
  {
    generate: true,
    namespace: 'fancyColors'
  }
]

<template>
  Use imported {{colors.primary}} or injected {{$fancyColors.primary}}!
</template>
<script>
import colors from '~/assets/scss/fancyColors.js'
export default {
  data(){return{
    colors
  }}
 
}
</script> 

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

License

MIT License

Copyright (c) sugoidesune