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>
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 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 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.
In the docs you can read the following:
Import Bootstrap into a Sass file (for example, application.css.scss) to get all of Bootstrap's styles, mixins and variables!
#import "bootstrap";
https://github.com/twbs/bootstrap-sass
I have several scss files. One for every major section of my app (user-page.scss, admin.scsss etc).
I tried making one application.scss and imported bootstrap as in the docs. I added the file in index.html after bootstrap.scss and before all my other scss files.
<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" />
<link rel="stylesheet" href="styles/application.css">
<link rel="stylesheet" href="styles/intro.css">
<link rel="stylesheet" href="styles/admmin.css">
I get the following error:
/usr/bin/scss --no-cache --update intro.scss:intro.css
error intro.scss (Line 22: Undefined mixin 'make-row'.)
So it seems it does not find bootstrap. It works if I import bootstrap in each file. Is this the right apporach? I think not. I get problem when I try to manually override a bootstrap variable.
How can I have several scss files and only import bootstrap once?
Think you're mixing SCSS import with HTML CSS links. So this bit here is wrong:
<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" />
<link rel="stylesheet" href="styles/application.css">
<link rel="stylesheet" href="styles/intro.css">
<link rel="stylesheet" href="styles/admmin.css">
I assume this is from your built HTML file. Your HTML does not know what an SCSS file is. Your SCSS must be processed into a CSS file before it is usable in your final HTML file.
The way to import an SCSS file is to use that import command inside the parent SCSS file at the top. So if your main SCSS file is application.scss, then at the top of that, you import your other SCSS files:
#import "bootstrap";
But you need to make sure that the _bootstrap.scss file is in the same directory as your application.scss file for this import to work.