Global Styles
marcosmoura opened this issue · comments
Yeah. I know. We shouldn't use this approach.
But...
I was thinking of using styled-vue along with a UI Framework that I'm developing. The main idea is to have dynamic styles that can be changed when using the UI Framework. As an example, let's think in a theme solution:
Vue.use(UiFramework, {
colors: {
primary: '#313131'
// and so on...
}
})
Then, inside a particular UI Component, I can use those "dynamic" data and generate the CSS. This already works, but I would like to generate the classes without the scoped attribute. This is only to make easier to override the CSS later (in userland).
For example, .ui-title[data-v-3bf6d6bb]
have higher specificity than .ui-title
.
With that in mind, it would be awesome to have an option to toggle the scoped option when passing to vue-template-compiler.
Maybe another expression called globalCss
or even a config inside vue.config.js
(it is also possible to configure it through webpack, poi and nuxt)
What do you think? I can easily submit a PR if makes sense for you.
Thanks :)
Maybe use globalStyle
for this:
import { css } from 'styled-vue'
export default {
globalStyle: css`
.foo {
color: ${vm => vm.color}
}
`
}
PR welcome.
Sounds good!
It's here: https://github.com/egoist/styled-vue#global-styles Enjoy 😄