Nuclear Pumpkin Mocha

    nuxt-scss-to-js

    1.0.4 • Public • Published

    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

    Install

    npm i nuxt-scss-to-js

    DownloadsWeekly Downloads

    107

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    8.33 kB

    Total Files

    7

    Last publish

    Collaborators

    • sugoidesune