nuxt-community/nuxt-sass-resources-loader

Name: nuxt-sass-resources-loader

Owner: Nuxt Community

Description: SASS resources (e.g. variables, mixins etc.) module for NuxtJs

Created: 2018-04-01 10:27:19.0

Updated: 2018-04-01 10:27:21.0

Pushed: 2018-04-02 17:06:41.0

Homepage: https://www.npmjs.com/package/nuxt-sass-resources-loader

Size: 153

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

nuxt-sass-resources-loader

This module does all the hard work of configuring sass-resources-loader for your nuxt application.

sass-resources-loader @import your SASS resources into every required SASS module. So you can use your shared variables & mixins across all SASS styles without manually importing them in each file. Made to work with CSS Modules!

Install

i nuxt-sass-resources-loader

 add nuxt-sass-resources-loader

Note that installing as a dev dependency --save-dev or -D will not work correctly.

Usage

You can use the nuxtjs aliases to resolve the file path.

le.exports = {
dules: [
// provide path to the file with resources
['nuxt-sass-resources-loader', '@/path/to/resources.scss'],

// or array of paths
['nuxt-sass-resources-loader', [
    '@/path/to/first-resources.sass',
    '@/path/to/second-resources.scss',
]],

// or the native options
['nuxt-sass-resources-loader', {
    resources: '@/path/to/resources.sass'
}],

// or from the npm package
['nuxt-sass-resources-loader', 'my-package/sass/resources.scss']

with sass resources option. require v1.1+

uxt.config.js
le.exports = {
dules: [
'nuxt-sass-resources-loader'

ssResources: [
'@/path/to/first-resources.sass'

You can also use resolve from node to indicate the relative path of the file:

t resolve = require('path').resolve

xt-sass-resources-loader', resolve(__dirname, './path/to/resources.scss')]

Glob pattern matching

You can specify glob patterns to match your all of your files in the same directory.

pecify a single path
urces: './path/to/resources/**/*.scss', // will match all files in folder and subdirectories
r an array of paths
urces: [ './path/to/resources/**/*.scss', './path/to/another/**/*.scss' ]

Note that sass-resources-loader will resolve your files in order. If you want your variables to be accessed across all of your mixins you should specify them in first place.

urces: [ './path/to/variables/vars.scss', './path/to/mixins/**/*.scss' ]

For more details see the official documentation

License

MIT