I am working on the vue component, which has applied scss for styling.
<style scoped lang="scss">
:root {
--c-text-primary: #282a32;
--c-background-secondary: #fdfcff;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: var(--c-background-secondary);
color: var(--c-text-primary);
}
</style>
however it doesn't work out, any idea how to make it work?
Do you have sass dependencies installed?
I have the dependencies:
sass
sass-loader
and it works fine for me
Related
I want to make this code snippet below work, but it's throwing an error.
<style lang="scss" scoped>
:deep(.q) {
&-badge {
font-size: 10px;
padding: 1px 4px;
&--floating {
top: -2px;
right: -2px;
}
}
}
}
</style>
I'm doing this in a project using Quasar | Vue 3 | Vite | SCSS
Sass doesn't understand :deep. It thinks you want &-badge to mean :deep(.q)-badge, which wouldn't be a valid selector.
<style lang="scss">
#import 'tippy.js/dist/tippy.css';
//#import "#/assets/vars.scss";
.chart-tooltip-slim {
color: #fff;
padding: 10px 15px;
}
.chart-tooltip {
min-width: 260px;
color: #fff;
padding: 15px 30px;
I have the following code inside the vuejs 2 app. The thing is that the lib is installed and it's working when I import only the js part. However when I import the styles it throws a loader error about dependency not found. What is wrong and how can I fix it?
#import '~tippy.js/dist/tippy.css';
should work.
You can also use
import 'tippy.js/dist/tippy.css';
...in JavaScript (typically you'd place all vendor style imports in main.js).
For example, if my app has two components with this SCSS
A component:
<style lang="scss" scoped>
.example {
color: red;
}
</style>
Another component:
<style lang="scss" scoped>
.another-example{
background: yellow;
}
</style>
Then I would like to have the SCSS from each component nested into one selector, so the resulting CSS will be
#my-app .example {
color: red;
}
#my-app .another-example{
background: yellow;
}
Is it possible to do this without going into every single component and nesting the SCSS inside the #my-app selector in every component?
I made a Vue module for myself and published to NPM, but when I try to install this module to another project via npm i <module-name>, I can use component, but it's not applying CSS for my component.
I think the problem is I am writing all CSS in style scope in my component. I don't know what the best practice is for including CSS. My style is so simple like this:
<style>
.container {
border: 1px solid #E5E5E5;
position: relative;
}
.image-container {
height: 70%;
width: 100%;
text-align: center;
margin-top: 7%;
}
.title-container {
width: 100%;
text-align: center; /* optional */
overflow: hidden;
text-overflow: ellipsis;
background-color: #F5F5F5;
border-top: 1px solid #E5E5E5;
position: absolute;
bottom: 0;
}
</style>
For a library, it might be more convenient (and less error-prone) for your users if you include the CSS in your bundle, so users wouldn't have to import the CSS themselves. This is also recommended in the Vue CLI docs. To do this, set css.extract=true in vue.config.js:
vue.config.js:
module.exports = {
//...
css: {
extract: true
}
}
I added this css rule
<style>
body {
background-color: rgb(184, 182, 182);
}
#app {
...
</style>
to my App.vue file within the tag (not scoped ;-); as learned in vue mastery courses. Which BTW are a great help!
This approach also is proposed by Babacadabra in a related post.
Everything builds fine, and the locally defined (scoped) styles of a component can be found in the dist/css folder.
But my global style declaration for the background-color disappeared. As result the website layout is different than the one I tested locally (using 'vue serve'):
The background color is not applied.
What am I making wrong?
I helped myself by adding the background-color declaration directly to my index file, but that should be a patch only. I'm looking for a final solution, so the complete workflow works as expected and local and remote versions behave the same.
UPDATE (more code):
As requested here more details, i.e. the complete App.vue. I hope that is sufficient, since to my (very basic ;.-) understanding of vue the global style declarations go into this Module.
<template>
<div id="app">
<img class="vservuLogo" alt="VservuLogo" src="./assets/VservU-Logo.png">
<HelloWorld msg="Welcome to VservU GmbH Munich"/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
<style>
body {
background-color: rgb(184, 182, 182);
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.vservuLogo {
width: 50%;
}
</style>
UPDATE2:
Since I could not reproduce that behavior in a new project, I guess I simply missed to clear the cache!