Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anteriovieira/nuxt-sass-resources-loader
SASS resources (e.g. variables, mixins etc.) module for NuxtJs
https://github.com/anteriovieira/nuxt-sass-resources-loader
module nuxt nuxt-module sass sass-resources-loader scss
Last synced: 2 months ago
JSON representation
SASS resources (e.g. variables, mixins etc.) module for NuxtJs
- Host: GitHub
- URL: https://github.com/anteriovieira/nuxt-sass-resources-loader
- Owner: anteriovieira
- Archived: true
- Created: 2017-10-15T04:20:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-29T23:28:46.000Z (almost 6 years ago)
- Last Synced: 2024-09-20T13:16:01.336Z (4 months ago)
- Topics: module, nuxt, nuxt-module, sass, sass-resources-loader, scss
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/nuxt-sass-resources-loader
- Size: 256 KB
- Stars: 185
- Watchers: 2
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
:warning: We are closing the support for this package and transferred to the official community package. So we strongly suggest that you use the official community package [@nuxtjs/style-resources](https://github.com/nuxt-community/style-resources-module).
Specially thanks our contributors submitting bug reports, feature requests and commenting on issues
#### Migration guide
```js
// nuxt-sass-resorces-loader
export default {
modules: [
'nuxt-sass-resources-loader'
],
// your settings here
sassResources: [
'@/path/to/first-resources.sass'
]
}
```
```js
// @nuxtjs/style-resources
export default {
modules: [
'@nuxtjs/style-resources',
],
styleResources: {
// your settings here
scss: ['@/path/to/first-resources.sass'],
less: [],
stylus: []
}
}
```
----
# nuxt-sass-resources-loader
[](https://www.npmjs.com/package/nuxt-sass-resources-loader)
[](https://circleci.com/gh/anteriovieira/nuxt-sass-resources-loader)
[](https://npmjs.com/package/nuxt-sass-resources-loader)
[](https://patreon.com/anteriovieira)
This module does all the hard work of configuring [sass-resources-loader](https://github.com/shakacode/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
```sh
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](https://nuxtjs.org/guide/directory-structure#aliases) to resolve the file path.
```js
module.exports = {
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+
```js
// nuxt.config.js
module.exports = {
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:
```js
const resolve = require('path').resolve
...
['nuxt-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.
```js
// Specify a single path
resources: './path/to/resources/**/*.scss', // will match all files in folder and subdirectories
// or an array of paths
resources: [ './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.
```js
resources: [ './path/to/variables/vars.scss', './path/to/mixins/**/*.scss' ]
```
[For more details see the official documentation](https://github.com/shakacode/sass-resources-loader#usage)
## License
[MIT](http://opensource.org/licenses/MIT)