How can I style v-html content with scoped css using #import?
There is an explanation on how to use ::v-deep here, but in my case I'd like to include a CSS file using #import.
I tried the following but it doesn't work:
<template>
<div v-html="richtext" />
</template>
...
<style lang="scss" scoped>
#import 'assets/scss/imports/headers.scss';
</style>
I could import the style globally which does work but my goal is to only import it in this richtext component.
I normally do it using the src attribute
<style lang="scss" src="#/assets/scss/imports/headers.scss"></style>
Related
I have imported some css files in my component.
<template>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdnglobal.immowelt.org/global-assets/4.0.0/fonts/fontello.css">
<link type="text/css" rel="stylesheet" media="screen" href="https://cdnglobal.immowelt.org/global-assets/4.0.0/legacy/0/base.css">
...
<template>
The thing is I want this styles to apply on this component.
They affects on other parent and sibling templates.
Is it possible to enable this to be applied on one template's elements?
If you are writing .vue single file components you can use this:
<style scoped src="./something.css">
</style>
you can try to import your CSS in component with
<style scoped>
#import url("https://cdnglobal.immowelt.org/global-assets/4.0.0/legacy/0/base.css")
#import url("https://cdnglobal.immowelt.org/global-assets/4.0.0/fonts/fontello.css")
...your CSS...
</style>
I use Fontello too with Vuejs, are you trying to use your own icons?
I am developing a chrome extension and am using Bootstrap-Vue on my Vue files. Currently, I imported bootstrap/bootstrap-vue into my js file, but this causes the styling to take place on a global level. Ideally, I would like a way for the bootstrap to only be scoped onto my inserted files. Is there a way to do this in the section of the Vue file?
// In .js file
import VModal from 'vue-js-modal'
import BootstrapVue from 'bootstrap-vue';
// I tried this in the Vue file but no effect was shown
<style scoped src="bootstrap/dist/css/bootstrap.css"></style>
<style scoped src="bootstrap-vue/dist/bootstrap-vue.css"></style>
To import the style only within a component use this inside the <style> tag
#import 'bootstrap/dist/css/bootstrap.css';
#import 'bootstrap-vue/dist/bootstrap-vue.css';
José's answer was nearly correct :
<style scoped>
#import 'bootstrap/dist/css/bootstrap.css';
#import 'bootstrap-vue/dist/bootstrap-vue.css';
</style>
I have a Vue app with many components. Currently I have Font-Awesome included in the head of the index.html file however only ONE page, or component, actually needs it. Is it possible to move it to the component itself so that it only loads when it's needed?
MOVE THIS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
TO THIS
<template></template>
<link rel="stylesheet" href="../../static/css/font-awesome-4.7.0/css/font-awesome-min.css"></link>
<script>
export default {
name: 'SingleComponent',
data: function() {
return{}
}
}
</script>
<style scoped>
</style>
I've tried downloading Font-Awesome and adding a link tag in the component like above ^^^^ I don't get any errors but the icons still don't work.
Import css file in style tag of App.js
<style>
#import './static/css/style.css';
</style>
If you have just one page or component, isn't it easier to create what you need in a <template /> and <html /> tag?
Instead of trying to include Font-Awesome directly in the component, I discovered there is already a Vue wrapper for it called vue-awesome so I used that.
I am new to vue.js and saw this video
https://www.youtube.com/watch?v=LsoLfELhG74
Which says you can do
<style scoped>
</style>
to scope the style, but this is if I embed it into the html page. What if I link to a .css file. How could you still scope the css?
Thanks
You can add a src attribute to the style tag like this:
<style scoped src="./test.css">
</style>
first create a scss file like styles/scss/_variables.scss.In that _variables.scss file import your required styles like $bg-color: red;
Next import that scss file in your required .vue file .
<style lang="scss">
#import "../styles/scss/_variables.scss";
.msg {
background-color: $bg-color;
}
</style>
I would like to integrate Bulma into my Vue.js project.
I have previously included included the CDN script tag into my <head>.
However after that, I followed these official instructions for including Sass pre-processor, as Bulma requires it in a Node project.
npm install sass-loader node-sass --save-dev
<style lang="sass">
/*write sass here */
</style>
Now, the script tag in <head> is being commented out, and I can't figure out how to load Bulma properly into my application.
I have imported Bulma in my root component style tags as suggested by #BillCriswell below, as follows:
<style lang="scss" src="bulma"></style>
<style lang="scss">
body {
text-align:center;
background-color:blue;
}
</style>
And the stylesheet is properly loaded, however if I add another style tag as further suggested, the styles don't load.
How do I load Bulma into my Vue.js project, and what is the recommended approach for integrating a CSS framework into Vue.js?
You should be able to do this since bulba's main entry in package.json points to bulma.sass.
<style lang="sass" src="bulma"></style>
<style>
/* Your css for this file... */
</style>
or you can do
<style lang="sass">
#import "bulma"
/* Your css for this file... */
</style>
There's no need to do import bulma from 'bulma' in your <script>.
If you can't just use the style tag it would depend on your webpack config. If you're using the vue-cli webpack template I believe you should be good.