Package Exports

@nuxtjs/style-resources

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nuxtjs/style-resources) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Nuxt Style Resources - Nobody likes extra @import statements!

📖 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: []
  }
}

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>

License

Inspired by nuxt-sass-resources-loader.

MIT License