nuxt-scss-to-js
Load SCSS Variables into Nuxt instance for use in Templates/Scripts.
Usage
// /assets/scss/variables.scss ;;;
This themes primary color is {{$scss.primary}}!
Setup
- Add
nuxt-scss-to-js
dependency to your project
yarn add nuxt-scss-to-js # or npm install nuxt-scss-to-js
- Add
nuxt-scss-to-js
to thebuildModules
section ofnuxt.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.
$scssprimary // '#0000ff'$scsssecondary // '#00ff00'$scsswarning // '#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.scssscss.js
Use
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.jsbuildModules: 'nuxt-scss-to-js'
// /assets/scss/variables.scss ;
This themes primary color is {{$scss.primary}}!
Example with Generate and Namespace
// nuxt.config.jsbuildModules: 'nuxt-scss-to-js' generate: true namespace: 'fancyColors'
Use imported {{colors.primary}} or injected {{$fancyColors.primary}}!
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) sugoidesune