Nobody likes extra @import statements!
Switch branches/tags
Clone or download

README.md

Nuxt Style Resources - Nobody likes extra @import statements!

npm (scoped with tag) npm Build Status codecov Dependencies js-standard-style

📖 Release Notes

Features

  • Share variables, mixins, functions across all style files (no @import needed)
  • Support for SASS, LESS and Stylus
  • Aliases (~/assets/variables.css) and globbing as supported
  • Compatible with Nuxt's build.styleResources (and will take them over directly if included!)
  • Blazing fast™️

Setup

  • If not already present, add the dependencies you need for SASS/LESS/Stylus (depending on your needs)
    • SASS: yarn add sass-loader node-sass
    • LESS: yarn add less-loader less
    • Stylus: yarn add stylus-loader stylus
  • Add @nuxtjs/style-resources dependency using yarn or npm to your project (yarn add @nuxtjs/style-resources)
  • Add @nuxtjs/style-resources to modules section of nuxt.config.js:
export default {
  modules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {
   // your settings here
   sass: [], // alternative: scss
   less: [],
   stylus: []
  }
}

Examples

LESS Example

nuxt.config.js:

export default {
  css: ['~assets/global.less'],
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    less: './assets/vars/*.less'
  }
}

assets/global.less

h1 {
  color: @green;
}

assets/vars/variables.less

@gray: #333;

assets/vars/more_variables.less

@green: #00ff00;

pages/index.vue

<template>
  <div>
    <!-- This h1 will be green -->
    <h1>Test</h1>
    <test/>
  </div>
</template>

<script>
import Test from '~/components/Test'

export default {
  components: { Test }
}
</script>

components/Test.vue

<template>
  <div class="ymca">
    Test
  </div>
</template>

<style lang="less">
  .ymca {
    color: @gray; // will be resolved to #333
  }
</style>

SCSS Example

nuxt.config.js:

export default {
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/vars/*.scss',
      './assets/abstracts/_mixins.scss' // use underscore "_" & also file extension ".scss"
      ]
  }
}

Instead of './assets/abstracts/_mixins.scss' you can use also '~assets/abstracts/_mixins.scss'

assets/vars/_colors.scss

$gray: #333;

assets/abstracts/_mixins.scss

@mixin center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

components/Test.vue

<template>
  <div class="ymca">
    Test
  </div>
</template>

<style lang="scss">
  .ymca {
    @include center; // will be resolved as position:abslute....
    color: $gray; // will be resolved to #333
  }
</style>

License

Inspired by nuxt-sass-resources-loader.

MIT License

Copyright (c) Alexander Lichter