The officially recommended way to customize / theme bootstrap is by overriding the bootstrap variables using sass. But how do I do this, or rather, how do I add this part of the process into the Vue webpack workflow ?
Googling led to try editing the vue.config.js file to add scss loader into webpack but I am unable to find the required file.
This is the directory structure
I have used vue-cli v3.4 to setup the project.
I am using vanilla bootstrap and not the bootstrap-vue components.
Make a file called custom.scss. Go into the node_modules/bootstrap/scss directory and copy everything from _variables.scss. Paste these into your custom.scss.
In your style.scss import your custom.scss before you import bootstrap.scss.
Now in your main.js import #/assets/style.scss.
You will need to remove the !default flag from any variables you wish to override in your custom.scss for them to take effect, as well.
Create a file /css/bootstrap-custom.scss, with the following:
// your variable overrides
// modify theme colors map
$theme-colors: (
"primary":#42b883,
//...other variables, you can find them in node_modules/bootstrap/scss/_variables.scss
);
// import to set changes
#import "~bootstrap/scss/bootstrap";
In the main script, import the added file instead of the current imported bootstrap css file:
// import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '#/css/bootstrap-custom.scss';
Reference: Bootstrap, Variable defaults
Related
I'm building a React website, to enable css modules styles I eject my project I used
npm run eject
And i added extra configurations in the webpack.config.dev.js and webpack.config.prod.js files, the problem is that I was using a component call react-big-calendar (https://github.com/intljusticemission/react-big-calendar), and in that module I have to import a css file. The problem is that when I enable the module features it doesn't apply the css styles to the calendar, It used to look like:
And now it looks like this:
What can I do in order to apply classes from the big-calendar css file?
Thanks!
Now you don't have to eject your project and add extra config to webpack.config to enable css modules.
Now whenever you want to use css modules, just name the file [name].module.css and that's it. This will solve your problem with the components which are not using css modules.
Let me know if it works for you
I am pulling in SweetAlert2 into Vuejs into my app using
import VueSweetAlert from 'vue-sweetalert';
Vue.use(VueSweetAlert);
This imports the whole package from the node_models folder. I now want to override SweetAlert2's sass files so I have copied and imported them into my local sass directories.
However they don't override the node_modules css. How can I configure Vuejs to import and use a plugin but to override the native styling with the copied styles that are in my project without having to put !important all over them?
Try to load your custom css files after the VueSweetAlert import like:
import VueSweetAlert from 'vue-sweetalert';
import '<path-to-your-custom-css>.css';
This seems like a hack or workaround, but it should override the defined css rules in vue-sweetalert.
The question is simple although the approach can vary.
First I am using the following:
1 - Webpack
2 - Babel
3 - ES6
4 - npm
I have the module Bootstrap included but can't figure out how to call the JS file via import
This is how I'm approaching it:
import Bootstrap from 'bootstrap'; and that doesn't work so my first problem is not being able to access bootstrap so i can't even begin to figure out how to access the bootstrap.js file.
The second approach was to scrap the idea of accessing Bootstrap from the node-modules folder and just add bootstrap.css and bootstrap.js to the src directory in my React build.
What I then tried was to access bootstrap css like this:
import './css/bootstrap.css'; and that works fine.
But when i attempt to import, bootstrap.js like this import './js/bootstrap.js I get an error when React tries to compile.
The image above shows how I'm trying to import my local JS file.
Any ideas what I'm doing wrong.
I would love either a solution using the bootstrap module (which is cleaner so I don't have to manually include) but would also like to know how to manually include as well.
Thank you.
You need to use the bootstrap WebPack package.
https://github.com/gowravshekar/bootstrap-webpack
I have this problem, I have these scss files for all my global variables:
colors.scss
fonts.scss
helpers.scss
And I have these scss files for my component based and import it on top of the .jsx files:
header.scss
footer.scss
searchbar.scss
My problem in all of my component based scss files, I need to import the color.scss and helpers.scss in that way it will be included multiple times in header.scss,footer.scss and searchbar.scss
How do you guys work on it, been searching for an hour and did not found any solutions.
Thanks!
Just make a app.scss file and import all the scss files into that one starting with your variable files.
We do a similar thing at my work and have one file that we import all our component scss files into and any shared dependencies go above those that way you are only having to import once. The main thing is to make sure that files with dependencies go below the dependency files.
Create a global scss like so:
global.scss => imports colors.scss, fonts.scss, helpers.scss
and include it in your root JS file.
This way, every time you create a module, it will have these default styles.
It's there a way to use Grunt for injecting a new line like #import "my-custom-reset-for-bootstrap.less" in the end of bootstrap.less. Or other ideea how can I inject my less file from outside of bootstrap package. I want to do this to keep in original state the bootstrap package.
Thank you!
If I were you I would leave the Bootstrap file as it is and import it into your custom style file instead. The main advantage of this solution is that you can use variables, mixins and actually everything from the original Bootstrap less file in your custom style definitions.
my-custom-reset-for-bootstrap
#import "bootstrap.less";
.my-custom-class {
color: #gray-light; //var from Bootstrap variable.less file
}
In this case you won't need to do anything after upgrading Bootstrap files to newer version.