I have a VueJS project that has a base component that can be styled differently depending n server config. Right now I am loading CSS from the server but I was wondering if it is possible to import scoped scss in vuejs dynamically. i.e
<style src="{{style_name_or_path}}" lang="scss" scoped/>
I think it's not possible to load dynamic styles that way. I'd suggest you to use CSS Variables to handle different styles.
Related
I have an app and would like to include some global styles that I can use anywhere in the app like this:
.btn {
...
}
In webpack I already have this for _variables.scss to include things like $my-color: $fff and that is wired up like this in my loaderOptions:
{
additionalData: `#import "#/styles/_variables.scss";`
}
Obviously for some global styles I could do the same thing, however, this will cause my styles like .btn to load as many times as components that I have.
Logically it would seem best to just go into my root Vue component and add global <style lang="scss"></style>.
However, I am upgrading a legacy jQuery app and it is being piecemealed and instead of one root app component, I have several roots for parts that have been converted to Vue. I don't have a central place to load these styles.
For instance I have searchBar and checkout apps that are instantiated using Vue.extend (so they are all part of the same instance). There aren't just two apps, there are quite a few. If I include the global styles in the root of any of them it... feels... icky...
Is there any way around this or should I set the global styles in a random app with a TODO to refactor once everything is ported over?
Ideally I would do the same thing I'm doing with the _variables.scss but having the styles duplicated for each component is a non starter for me.
In this scenario you do not need to worry about how webpacks CSS loaders are working.
You can simply go into your main.js and import '#/styles/globals.scss' to load the styles globally.
I am trying to access vuetify inside a component I dynamically get from http-vue-loader. I received an error that says vuetify components weren't registered. I then try to import the needed components with a couple different methods with no avail. The methods I tried below didn't work.
require('#/node_modules/vuetify/dist/vuetify.min.css')
------------
<style scoped lang="scss" src="#/node_modules/vuetify/dist/vuetify.css"></style>
"import" syntaxd also doesn't work as well because I am using module.exports = {} instead of export default { } due to http-vue-loader requirements. Does anyone have a solution for this? I am using webpack.
You could try to access them via
Vue.options.components.XXX
Eg Vue.options.components.VIcon
I am trying to get vue formulate controls to be syled using Buefy. What is the best way to go about this?
I imagine it's probably with using vue-formulate class keys.
But I am not sure what corresponding Buefy classes to match them to. (Or perhaps there is a different way to go about it?)
Buefy is styled with Bulma — so you have 4 options:
Use class keys to add Bulma styles to your <FormulateInput>s.
Use custom inputs to wrap Buefy components. This will take some work since they don't share common markup. For example, Buefy doesn't really have "error messages", it has "messages" which can be marked with the Bulma class "is-danger".
Ditch Buefy
Ditch Vue Formulate
(Opinion) – If you like Bulma's styles, then I would go with option #1. You can always use Buefy for your site but not for your forms and instead just configure Vue Formulate's class keys with Bulma's classes (Bulma classes are included automatically if youre using Buefy)
Full disclosure: I'm the creator of Vue Formulate.
I did some quick testing using Bulma (not Buefy) and the following class binding seems to work for Bulma style inputs
Vue.use(VueFormulate, {
classes: {
outer: 'field',
wrapper: 'control',
input: 'input'
}
})
I've been struggling with adding Vuetify to a single component.
this will add the css:
<style scoped lang="scss" src="../../../../../../../node_modules/vuetify/dist/vuetify.css"></style>
But complex components like data tables results in errors.
Would really appreciate some help.
Thanks!
I am trying to develop an application using vue.js2. I am getting some strange texts in source code. You can see those texts in below image.
Could anyone say why it is coming ?
You might be using scoped attribute on styles tag in your .vue files to scope your styling to the component only.
Any styles scoped to a component using the <styles scoped> ... </styles> , the styles will be applied only to the elements in that component only.
So vue-loader which parses the .vue files uses PostCSS behind the scenes to achieve this by add adding those weird and unique data attributes.
See Scoped CSS for more info