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
npm i nuxt-sass-resources-loader# or yarn 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.
moduleexports = modules: // 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+
// nuxt.config.jsmoduleexports = modules: 'nuxt-sass-resources-loader' sassResources: '@/path/to/first-resources.sass'
You can also use resolve from node to indicate the relative path of the file:
const resolve = resolve...'nuxt-sass-resources-loader' ...
Glob pattern matching
You can specify glob patterns to match your all of your files in the same directory.
// Specify a single pathresources: './path/to/resources/**/*.scss' // will match all files in folder and subdirectories// or an array of pathsresources: './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.
resources: './path/to/variables/vars.scss' './path/to/mixins/**/*.scss'
For more details see the official documentation