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.
Related
I am new to Nuxt.
I have a page
pages/page1.vue
<template>
<h1 class="title">Page</h1>
</template>
<style>
.title {
font-size: 16px;
}
</style>
Then, under layouts I have an error.vue
layouts/error.vue
<template>
<h1 class="title">Error Page</h1>
</template>
<style>
.title {
color: red;
font-size: 18px;
}
</style>
What I found is that when page1 is rendered, the title appears in Red. I checked the inspect elements and found that the CSS of error as well as of page 1 is applied.
I do not have a default.vue in the layouts directory.
As mentioned this is my first project in Nuxt (or vue) and want to understand how to ensure that CSS of a page are applied on that page only. This is in development mode (npm run dev). Thanks
The issue is CSS without scoped attribute renders at application level. You should use scoped attribute in styles tag as
layouts/error.vue
<template>
<h1 class="title">Error Page</h1>
</template>
<style scoped>
.title {
color: red;
font-size: 18px;
}
</style>
**When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only otherwise consider global style.
I have a stencil component that I want to set a font to.
What I have now:
index.html
<body>
<sidebar-component webpagename="dashboard"></sidebar-component>
</body>
<style>
* {
margin: 0;
font-family: Lab_Grotesque_Light;
}
#font-face {
font-family: 'Lab_Grotesque_Medium';
src: url('./assets/fonts/Lab_Grotesque_Medium.otf');
font-weight: normal;
font-style: normal;
}
</style>
This sets the font when I start my component locally.
But I want to use the component in a Vue application (imported from npm). There the custom font wont work. Is there another way to implement this.
This is covered in the docs now. You can save the font to your src folder and reference it directly. https://stenciljs.com/docs/local-assets
Update: Actually it looks like there is an issue where it is not possible to load custom fonts within a Shadow DOM https://github.com/ionic-team/stencil/issues/2072
If I put the #font-face{} in the header of the index-file. It actually worked from my other applications that uses the stencil component.
In index.html
<head>
<style type="text/css" media="screen, print">
#font-face {
font-family: "LabGrotesque-light";
src: url("../assets/font/lab-grotesque-light.otf") format("opentype");
}
</style>
</head>
You have to manually define the font face in your Vue application to make this work. Just like you did in the index.html of stencil.
If you dont want to include the font assets in you vue application you can either copy the font assets with https://stenciljs.com/docs/copy-tasks or https://docs.npmjs.com/files/package.json#files to your npm package.
Trying to create a new component style using the $display-breakpoints stylus variabled from Vuetify (as described in this answer) but it doesn't seem to work.
<style lang="stylus">
.submit-container
#media $display-breakpoints.sm-and-up
font-size 5em
</style>
I get the following error:
$display-breakpoints has no property .sm-and-up
I needed to import the variables stylus file:
<style lang="stylus">
#import '../../assets/style/variables.styl'
.submit-container
#media $display-breakpoints.sm-and-up
color #ef4655;
</style>
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:
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".