Nuxt dynamic styles module

Nuxt module for on-build dynamic styles import :dizzy:

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 the 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