The question: How to make WebStorm to understand scss in html
Description:
I'm have existed project based on vue.js
I've associate .vue with html language (.vue == .html).
In general *.vue files have structure like:
<template>
...
</template>
<script>
...
</script>
<style lang="scss">
$some_var: 10px;
.parent_class {
.child_class {
padding: $some_var;
}
}
</style>
The problem is that WebStorm didn't expect to see scss (instead of pure css) in html.
I know that "WebStorm" (as well as "IDEA") has language injection.
But it's a bit challenging for me to understand how to use language injection properly.
UPD: look likes it's may be impossible for now because scss is template language (mean not injectable for a while): https://stackoverflow.com/a/29062183/930170
It is supported in PhpStorm/WebStorm 2016.1 -- for both LESS and SCSS.
But you have to use slightly different syntax: <style rel="stylesheet/scss" type="text/css">
<style rel="stylesheet/scss" type="text/css">
$some_var: 10px;
.parent_class {
.child_class {
padding: $some_var;
}
}
</style>
Nuance is: rel attribute is not really allowed here. For more standards-complaint approach please watch https://youtrack.jetbrains.com/issue/WEB-20921 ticket and star/vote/comment it to get notified on any progress. UPDATE -- implemented as of 2017.1 version.
UPDATE 28/03/2017 for 2017.1 version of the IDE
<style type="text/scss">
$some_var: 10px;
.parent_class {
.child_class {
padding: $some_var;
}
}
</style>
<style type="text/stylus">
body
font: 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px
</style>
Here how it looks in PhpStorm/WebStorm 2017.1:
Related
After integrating stylus into my Vue3 application, my global css variables no longer work (loaded through prependData as mentioned here).
Old, working code (no stylus):
<style>
.item {
background-color: $bgColor;
}
</style>
New code, doesn't work (w/ stylus):
<style lang="stylus">
.item
background-color: $bgColor;
</style>
Is it possible to update my old code to leverage stylus and keep my variable structure? Thanks for your ideas.
I am using a vuetify component as a widget on a page along with another content after the widget. However, I have too much free space between the widget and the rest of the page. The vuetify app takes too much height and I can't figure out how to remove it.
Here's how it look in the browser.
I have tried to override the css of App.vue in the following way but it doesn't work. Any suggestions?
<style scoped>
[data-vuetify] {
overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
min-height: 0vh !important;
}
</style>
Here's how App.vue looks like:
<template>
<div data-vuetify>
<v-app id="app">
<router-view></router-view>
</v-app>
</div>
</template>
<style scoped>
section {
margin: 10px 0;
}
[data-vuetify] {
overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
min-height: 0vh !important;
}
</style>
Here is the solution that worked for me.
<style scoped lang="scss">
::v-deep .v-application--wrap {
min-height: fit-content;
}
</style>
I have had the same problem and I have solved it as follows:
<style>
.v-application--wrap {
min-height: 0vh !important;
}
</style>
In App.vue
Also, I have built it as a library using vue-cli
I'm new to Vue and Vuetify.
Try unsetting it via CSS in your App.vue file:
<style>
.v-application--wrap {
min-height: unset;
}
</style>
It should unset the default rule "min-height: 100vh;".
For me, I removed <v-app> from the component and added it to the enclosing page (I'm using Nuxt) which removed the extra space from the component.
I have tried using a vuetify class based on breakpoint it worked
<v-app :class="{'yellow': !$vuetify.breakpoint.xs}">
I have a class named pagemargin in a vue file
But when I use this class it is not working, as in the following case
<v-app :class="{'pagemargin': !$vuetify.breakpoint.xs}">
why is it not working?
<style >
.pagemargin{
margin-right: 100px;
margin-left: 100px;
color: red;
}
</style>
Add !important to your styles. Vuetify adds its default style to the whole v-app so you need to override it.
.pagemargin{
margin-right: 100px !important;
margin-left: 100px !important;
color: red !important;
}
Using !important might work, but in long term as your application gets bigger, it could be costly. You should instead, solve this by providing a CSS that has a higher specificity than that of Vuetify. I provide you with an example:
<template>
<div class="my-div">
<v-btn :class="{'my-padding': !$vuetify.breakpoint.xs}" tile outlined color="success">
View
</v-btn>
</div>
</template>
<style>
/* this wont work */
.my-div .my-padding {
padding-right: 200px;
padding-left: 200px;
}
/* this works */
.my-div .v-btn.my-padding {
padding-right: 200px;
padding-left: 200px;
}
</style>
<style scoped>
/* this also works */
.my-div .my-padding {
padding-right: 200px;
padding-left: 200px;
}
</style>
You can read more about specificity here.
I'm having trouble overriding bootstrap styles in my single file component when using bootstrap-vue
My file looks like this:
<template>
<b-tabs pills vertical>
<b-tab title="This title" title-item-class="mytab" acitve>
Some tab
</b-tab>
<b-tab title="This title 2" title-item-class="mytab">
Some other tab
</b-tab>
</b-tabs>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.nav-pills .mytab .nav-link:not(.active) {
background-color: red !important;
}
.nav-pills .mytab .nav-link {
background-color: blue !important;
}
.tab-content > .tab-pane {
border: 1px solid;
border-left: 0px none;
}
</style>
I can inspect my component and I can see that the "mytab" class is being added to the li parent divs with nav-item classname but the css isn't showing up.
It works here: https://jsfiddle.net/3xwmm1qt/43/ but I'm pretty sure it's because the css is being loaded after the page renders. I'm not 100% about that.
Updated I also tried removing the 'scoped' attribute from the style tag and the css still would work. It still doesn't even show up when I inspect the div. I can still see the classname, but in the Rules tab (using FF) there's no styling for my custom classname.
Yeah the difference between the jsfiddle and your code is that you've written scoped CSS (less):
Here's how you fix it, Remove the scoped from style:
<style lang="less">
.nav-pills .mytab .nav-link:not(.active) {
background-color: red !important;
}
.nav-pills .mytab .nav-link {
background-color: blue !important;
}
.tab-content > .tab-pane {
border: 1px solid;
border-left: 0px none;
}
</style>
Scoped means that the css code will only work in this element and vue will try to do it only for the classes attached to the elements which have the class you tried to override while not being scoped means that it'll do it for the entire document hence will override bootstrap's css.
I am using Sitefinity Stylesheet widget.When i try to apply inline style sheet inside Write CSS tab,the styles are not applied as expected
This is my code:
<style>
.menu a{
text-decoration: none;
}
.....
......
</style>
Could you please help me to figure out the issue here?
Remove the tags <style> and </style>
There is already an instruction in "Write CSS tab".