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>
Related
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>
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 React app created using create-react-app which links to my CSS file as shown below in index.html file:
<link rel="stylesheet" href="../src/site.css"></link>
The site.css is implemented below:
body {
background-color: green;
height:100%;
width:100%;
}
When my app is run it does not apply styles to the body. I can see the css file is being downloaded.
The src directory is not served with create-react-app. You either need to move your CSS file to the public directory or import it from one of your JavaScript files.
Internally everything is bundled using Webpack with loaders that understand stylesheets, so the simplest way to handle this is to remove the link tag from your public/index.html file and instead add the following import to your src/index.js file:
import "./site.css";
Alternatively, if you really need to link to the stylesheet from your html file, you can move it to public/site.css and change your link tag to reference it:
<link rel="stylesheet" href="/site.css">
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 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.