We Keep Coding

How to override Bootstrap variables in Vue workflow ( Vanilla Bootstrap )?

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

Css module with react

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

How to import tippy.js into an html page with webpack 4?

Per the tippy.js git hub page I installed it with npm:
npm i tippy.js
Now I have a .js source file that's used for a webpack 4 html page that gets output to my ./dist folder, but I don't know how to import it; my other option is just to include it from the CDN but that doesn't seem very webpackesque
Also I'm using ES6 via babel-loader stage-0; so how exactly do I import that in so it's included with my bundle?
Shouldn't the CSS for tippy need to be imported as well?

Okay I found it here
import tippy from 'tippy.js'
and for CSS it's
import 'tippy.js/dist/tippy.css'

How to use MaterializeCss with Vue.js?

I don't want to use Vue-Material nor Vuetify.
I want to use Materialize.
What I do is:
npm install materialize-css#next
In main.js, where my new Vue App is defined I import Materialize like this:
import 'materialize-css'
Somehow the javascript is working, but the CSS is not loading; I test it with a Card Reveal.
The swapping animation works, but it is not styled. Card Reveal is one of the reasons why I want to use MaterializeCss, those other two don't provide this functionality. And I also want to use 'normal' HTML elements instead of using 100 of new elements (for example in vuetify).

Step 1: installation
npm install materialize-css#next --save
npm install material-design-icons --save
Step 2: import materialize css in src/main.js
At src/main.js
import 'materialize-css/dist/css/materialize.min.css'
import 'material-design-icons/iconfont/material-icons.css'
Step 3: initialize materialize components
Add following code in your component(say App.vue):
import M from 'materialize-css'
export default {
...
mounted () {
M.AutoInit()
},
...

This line imports the javascript (the entry point of the npm module from node_modules folder):
import 'materialize-css'
To import the CSS files just do this:
import 'materialize-css/dist/css/materialize.css'

I would also recommend you add the materialize css CDN in the index.html. Aand also create a script tag and add this:
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
});

How to import a custom JS file into a React Single Page App?

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