Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nuxt-modules/style-resources
Style Resources for Nuxt 3
https://github.com/nuxt-modules/style-resources
import less nuxt nuxt-module nuxtjs sass stylus
Last synced: about 14 hours ago
JSON representation
Style Resources for Nuxt 3
- Host: GitHub
- URL: https://github.com/nuxt-modules/style-resources
- Owner: nuxt-modules
- License: mit
- Created: 2018-11-08T14:55:12.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2025-01-24T22:31:26.000Z (8 days ago)
- Last Synced: 2025-01-25T04:16:16.545Z (8 days ago)
- Topics: import, less, nuxt, nuxt-module, nuxtjs, sass, stylus
- Language: TypeScript
- Homepage:
- Size: 1.05 MB
- Stars: 594
- Watchers: 11
- Forks: 22
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Style Resources for Nuxt 3 - Nobody likes extra @import statements!
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]
Nuxt 2 is supported with `@nuxtjs/style-resources@^1`, documentation is on [v1](https://github.com/nuxt-community/style-resources-module/tree/v1) branch.
If you are using Vite, this module is not needed.
You can use the [`css.preprocessorOptions`](https://vitejs.dev/config/shared-options.html#css-preprocessoroptions) instead.
[📖 **Release Notes**](CHANGELOG.md)
## 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
* Support for hoisting `@use` imports
* Compatible with Nuxt's `build.styleResources` (and will take them over directly if included!)
* Blazing fast:tm:
## 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 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 -D @nuxtjs/style-resources`)
- Add `@nuxtjs/style-resources` to `modules` section of `nuxt.config.ts`:
```ts
export default defineNuxtConfig({
modules: [
'@nuxtjs/style-resources',
],
styleResources: {
// your settings here
sass: [],
scss: [],
less: [],
stylus: [],
hoistUseStatements: true // Hoists the "@use" imports. Applies only to "sass", "scss" and "less". Default: false.
}
})
```
## Examples
### LESS Example
`nuxt.config.ts`:
```js
export default defineNuxtConfig({
css: ['~assets/global.less'],
modules: ['@nuxtjs/style-resources'],
styleResources: {
less: './assets/vars/*.less'
}
})
```
`assets/global.less`
```less
h1 {
color: @green;
}
```
`assets/vars/variables.less`
```less
@gray: #333;
```
`assets/vars/more_variables.less`
```less
@green: #00ff00;
```
`pages/index.vue`
```vue
Test
import Test from '~/components/Test'
export default {
components: { Test }
}
```
`components/Test.vue`
```vue
Test
.ymca {
color: @gray; // will be resolved to #333
}
```
---
### SCSS Example
`nuxt.config.ts`:
```js
export default defineNuxtConfig({
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`
```scss
$gray: #333;
```
`assets/abstracts/_mixins.scss`
```scss
@mixin center() {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
```
`components/Test.vue`
```vue
Test
.ymca {
@include center; // will be resolved as position:absolute....
color: $gray; // will be resolved to #333
}
```
---
## License
Inspired by [nuxt-sass-resources-loader](https://github.com/anteriovieira/nuxt-sass-resources-loader).
[MIT License](LICENSE)
Copyright (c) Alexander Lichter
[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/style-resources/latest.svg?style=flat-square
[npm-version-href]: https://npmjs.com/package/@nuxtjs/style-resources
[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/style-resources.svg?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/style-resources
[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/style-resources-module.svg?style=flat-square
[codecov-href]: https://codecov.io/gh/nuxt-community/style-resources-module
[license-src]: https://img.shields.io/npm/l/@nuxtjs/style-resources.svg?style=flat-square
[license-href]: https://npmjs.com/package/@nuxtjs/style-resources