Skip to content

Latest commit

 

History

History
174 lines (132 loc) · 3.47 KB

README.md

File metadata and controls

174 lines (132 loc) · 3.47 KB
Raw

nuxt-scss-to-js

npm version npm downloads Github Actions CI Codecov License

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