Use the same variable both in scss and vue?
I need to calculate the number from data, and they need to be the same value. How can I use the same variable from vue in sass file?
And some calculations are made using this value.
View the source file at codepen (https://codepen.io/EricBugfree/pen/mXEpey).
Related
Vue uses 12-grid system. Is it possible to change the dimension for any other amount of grids?
There is a sass variable called $grid-columns which is set by default to 12.
You can modify it to change vuetify grid system to any other number of columns.
Read more about vuetify variables here.
I am using less css in my vue components.
Some of my components require the use of '>>>' deep selector for elements that I add programatically. However I get 'Unrecognised input' error when I do so.
I want to use less syntax to import variable for colors, font-size, etc. to keep those core variable in one file and use them in all of my components.
Is there a workaround for this?
Thanks
As described here in the Vue Loader docs, if your preprocessor does not allow >>> you can use ::v-deep, which should be ignored by the preprocessor because it is syntactically valid CSS.
I added extract text plugin for extracting sass and scss for vue component, but now I want to know how I also add extract text plugin for normal css?
I got My answer , as like scss , sass and others , I just have to put css test there simply.
I'm new to Vue (and the concept of single file components) and not sure how the CSS is compiled when my app is generated.
I have a pattern library where all the SCSS is compiled for my project so I want to pull this into my components. I know I can load in the mixins and variables globally, then I intend on handpicking other blocks of sass if they need to be used to style that component.
What I'm worried about is:
if I keep using the same style definitions in multiple components, will these be duplicated in the compiled css?
If so. how can that be avoided? Eg:
I import the 'headings.scss' in 10 components. Will there be 10 instances of that 'headings.scss' file in the compiled CSS?
I hope that makes sense! Just need some more clarity here.
Yup there will be duplication. But if you are using vuejs webpack template the production build's css is processed by cssnano which will discard duplicated css
note; only exact duplicates will be discarded.
Experimenting with Vue.js the first thing I noticed is how every instance of a component that I define as single file component and include as custom element gets a random hash attribute like data-v-58fd7087="".
Specifically:
Every DOM element of every instance of a given component gets the same hash
The hash is generated independently of the router
The hash is stable between calls
The hash is stable between name changes of the component
The hash is not stored / generated on the disk
Thus the hash is generated dynamically
Could it be generated by Karma or Webpack that are part of my Vue setup?
If not, these are some surprising observations to me. It leads to two questions:
When and how is this hash (attribute) generated?
Why is the hash (attribute) generated?
Something similar occurs when using scoped CSS with Vue Loader.
I use scoped css and I have attributes like data-v-4646bc3c, so I figure that is it.
If you don't want this feature, try removing the scoped attribute from your single file components.
<style scoped>
/* local styles */
</style>
If you're using vueify and you're wondering why you are getting changes in your build without having changed anything, make sure you are running vueify with the process.env.NODE_ENV set to 'production'. Otherwise it generates hot-reload code that has new data-v-* hashes on every build.