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.
Related
Hopefully this is a newbie question.
I am working on integrating vuetify into an existing vuejs web SPA application in a few screens. The application uses purpose ui for it's css and styling. After integrating vuetify into the application we see that the site now has the style of vuetify.
How can I ensure that vuetify's styling is only restricted to the specific vuetify controls on the few screens, that those controls are used on?
Update 1:
index.js
if (Meteor.isClient)
{
import 'vuetify/dist/vuetify.min.css';
}
index.html: meteor-bundled-css line below should include the vuetify.min.css in the bundled css file but I don't see the css constructs in the bundled file, though the website is now a material ui\Vuetify website now.
<head>
<link type="text/css" href="/css/purpose.css" rel="stylesheet">
<meteor-bundled-css />
</head>
I was able to workaround this issue by removing Vuetify and adding BootstrapVue in the project, wrt to the BootstrapVue, Bootstrap css files, instead of adding the css files in the index.js file, I added the same to the client folder so it could be bundled\minified by Meteorjs itself.
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 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>