Skip to content
Nobody likes extra @import statements!
JavaScript Vue CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib fix: separate sass and scss - BREAKING CHANGE (#69) Aug 7, 2019
test fix: separate sass and scss - BREAKING CHANGE (#69) Aug 7, 2019
.editorconfig
.eslintrc.js chore: init Nov 8, 2018
.gitignore chore: init Nov 8, 2018
.travis.yml test: remove node 9 and 11 tests (#3) Nov 8, 2018
CHANGELOG.md chore(release): 1.0.0 Aug 7, 2019
LICENSE chore: init Nov 8, 2018
README.md chore: make warning more prominent Sep 3, 2019
commitlint.config.js chore: init Nov 8, 2018
index.d.ts feat(types): add nuxt configuration type (#57) Jun 21, 2019
package.json chore(release): 1.0.0 Aug 7, 2019
renovate.json chore: init Nov 8, 2018
yarn.lock fix: separate sass and scss - BREAKING CHANGE (#69) Aug 7, 2019

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™️

Warning

Do not import actual styles. Use this module only to import variables, mixins, functions (et cetera) as they won't exist in the actual build. Importing actual styles will include them in every component and will also make your build/HMR magnitudes slower. Do not do this!

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: [],
   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:absolute....
    color: $gray; // will be resolved to #333
  }
</style>

License

Inspired by nuxt-sass-resources-loader.

MIT License

Copyright (c) Alexander Lichter

You can’t perform that action at this time.