Nuxt dynamic styles module

Nuxt module for on-build dynamic styles import 💫

Installation

Install package in your project

npm i @sparing-software/nuxt-dynamic-styles-module

Install @nuxtjs/style-resources if you don't already have

npm i @nuxtjs/style-resources

Configuration

Add module in nuxt.config.js

modules: [
  ['@sparing-software/nuxt-dynamic-styles-module', {
    // ... options
  }]
]

Caveat: @nuxtjs/nuxt-dynamic-styles-module must be set before @nuxtjs/style-resources module.

Options

Option	Description	Default
content	Content of the styles that will be imported. Could be string or function	''
addTo	Where to add styles in styleResources list. Available options: 'start', 'end'	'start'

Example

['@sparing-software/nuxt-dynamic-styles-module', {
  content: function () {
    return axios.get('https://example.com/current-styles').then(res => res.data)
    // '$primary-color: #bebebe; .main { background: $primary-color; }'
  },
  addTo: 'end'
}]

And then in code

<main class="main"> <!-- background: #bebebe; -->
  ...
</main>

button {
  color: $primary-color; // color: #bebebe;
}

Contributing

Want to help improve this plugin? Great!
Project is open-source so fork repo and join us!

License

MIT License © Sparing Interactive