I have a web application that uses Bootstrap 3. I'm using webpack, so I npm installeded bootstrap, and I'm referencing it like so:
import 'bootstrap/dist/css/bootstrap.css';
This works well. But now I want to use a different bootstrap theme (Slate), that only changes the css file.
I can think of two options of doing this.
Replace bootstrap.css inside the node_modules directory. Since node_modules is not a part of our source repo, we will need to do this repeatedly. This is clearly not a good option.
Don't use npm for bootstrap at all - put all the bootstrap files in a folder and reference that instead. This will work, but we won't get updates if a new version of Bootstrap is released.
Is there a way to reference bootstrap.css from one place, and all the other bootstrap files from another place? Can webpack do that?
Related
Link to project picture
I am creating a project in react and needed bootstrap. But it is overriding my custom css. Some of default bootstrap changing my headings. I have tried everything like putting my css link below bootstrap and also importing it into my index.js file but nothing working. i have attached the picture of my project.
Try maybe using bootstrap as a dependency:
npm i bootstrap
and import in index.js:
import 'bootstrap/dist/css/bootstrap.min.css';
or even try a react-bootstrap dependency
npm i react-bootstrap
Bootstrap is written with !important rules, so they has the highest priority if given!
Maybe you can try inline css in React elements (although not recomended in a simple HTML)
All the best!
As you haven't added any codes example or link of your live project, please check if CSS file has been linked properly. Go to page source and click on styles.css. It should open all your codes inside CSS file. If you can't open this file, or there's nothing found, you should check CSS file linking once again.
But if you can see css file properly but still not working, as a final option, you can use "!important" in CSS class. It will work fine.
Install bootstrap as npm package using npm i bootstrap. Then place your styles.css in the src folder and import styles.css in your App.jsx.
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.css'
Or you can even try using !important. This will definitely work but you will need to to it every time you want to override a style.
As mentioned, bootstrap adds !important to seemingly everything. In order to remove all of them you'll need to install the npm package instead of linking to a CDN (like you're currently doing). So:
npm install bootstrap or yarn add bootstrap
Then create an app.scss (naming is arbitrary here) and add the following lines
$enable-important-utilities: false; //this disables !important
#import "../../node_modules/bootstrap/scss/bootstrap";
Then, import that app.scss file into your index.js file:
import './app.scss'
The next time your run npm start (or whatever command you're using) it should generate a new css file to use. You may need to install sass if your project isn't already using it. But, that's beyond the scope of this answer.
I haven't used SASS or SCSS in anything besides codepen before so apologies if this is a basic question, but my CSS was working fine, but I wanted to nest some tags, and when I setup the SCSS and SASS dependencies and changed my filename to .scss, all of my formatting went away. I read something somewhere about importing an scss file into the css file, but I'm not really sure how to accomplish that.
Here's a link to the code sandbox: https://codesandbox.io/s/oj15rk1vw9
Use the Parcel Bundler template instead of the create-react-app template
Also if you're using react add react and react-dom as dependencies since the Parcel Bundler template only comes with parcel as a dev dependency
https://codesandbox.io/s/q7877ov756
If you just change all instances of style.css to style.scss then it'll work
it looks like everything in the clientapp folder is compiled into javascript and bundled into main-client.js using webpack, probably. i don't know much about it.
what i'm wondering is, if i have some javascript and css that isn't strictly part of the angular app, where in the project do i add these dependencies. do i add it in the dist folder? it looks like that folder is dynamically created by webpack so i didn't want to do that.
for example, the default angular app it installs clearly uses bootstrap for css grid system classes, so bootstrap must be installed somewhere. is it in the webpack config? how would i go about adding any other third party assets or my own?
thanks for any clarity about using this template
According to this blog by Steve Sanderson, who is apparently the author of this template you are referring to, the intended order of operations to add third party node modules is:
Add the module to your package.json file, save and then restore npm packages,
Add the item to the vendor array in webpack.config.vendor.js (which is the same as adding the item to the nonTreeShakableModules in the same file as Mike_G mentioned),
Run webpack --config webpack.config.vendor.js to repack your new assets. Make sure to install webpack with npm before this step.
It may be worth mentioning that Steve says that in step number 2, if what is being added is a css asset, the full path within node_modules and extension are needed, i.e. font-awesome/css/font-awesome.css, but if you are only including a Javascript library, then just the name of library will suffice, i.e. moment for Moment.js.
Well since webpack is being used, there is no way of adding any JS or CSS code inside that budnle.js file.
You would have to create you code before the packaging is being run.
The other way is to create your files and import them manually in t he index.html file.
This is ad hock way of doing stuff, but only in case that you need to add some CSS code to your project and not having knowledge of angular/webpack stuff.
As for JS code, its nearly impossible to add anything like that, since html code is also compiled and sent into bundle.js.
You can use two ways:
1) use angular/cli. In .angular-cli.json you can find:
"styles": [
"styles.css"
],
"scripts": [],
here you can add any custom css or js file.
2) work with static files:
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files
in this second way you can set a specific folder, add any custom file css or js and link to it from _layout.cshtml file.
hope this help u
I am customizing the bootstrap using this link http://getbootstrap.com/customize/. When I download there is no LESS file, only CSS files inside the customized bootstrap. How can I get the customized bootstrap with LESS files.
You don't need customized less files. When you use the less version of bootstrap, you can have a look at bootstrap.less - it imports all the different components.
In your custom less file, you can just import the ones you need instead of bootstrap/bootstrap.
Maybe you could start using bower to organize all your dependencies. Tried installing it and run bower install bootstrap and all the files will be automatically downloaded into bower_components/bootstrap folder. The sources included all the less files per components.
I want to remove Bootstrap entirely from my meteor app because I use Thoughtbot's Neat and Bourbon as a responsive css framework. So I made sure I have no Bootstrap packages installed, but when I start the application and check the CSS, I see Bootstrap styles in the CSS file.
So I assume Bootstrap is enabled and loaded by default by Meteor?
Is it possible to remove it?
If you've removed all the bootstrap packages, meaning you can't see any when you do this
meteor list --using
That means you don't have any external bootstrap files included in your project. You can have them however from other sources like your own CSS files or anything you have put in yourself.
Meteor doesn't include bootstrap in projects by default.