rollup-plugin-vue-global-styles—global sass variables for your vue rollups

Usage

This plugin will inject the contents of any matched file into the top of the Scss and Sass style blocks of your Vue components.

// rollup.config.js
import globalStyles from 'rollup-plugin-vue-global-styles'
import vue from 'rollup-plugin-vue'

const patterns = ['./src/**/vars.scss']

export default {
  input: 'src/index.js',
  plugins: [
    globalStyles({ patterns }),
    vue()
  ]
}

Options

• patterns: (required) An array of file paths to be injected. Can contain globs
• include: Files to inject styles into. Defaults to ./**/*.vue.
• exclude: Files not to inject styles into.
• debug: Print potentially useful debug messages. Defaults to false.

Warning

⚠️ This plugin will not check any filetypes or file contents, it just reads in the files and injects them—make sure to only match .scss or .sass, and only import variables and mixins to avoid duplicated compiled CSS in every component.

Contributing

# build
npm run build

# test
npm run test

Bug reports and pull requests are welcome on GitHub at https://github.com/SohoHouse/rollup-plugin-vue-global-styles. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The module is available as open source under the terms of the MIT License.