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.
Related
I'm using a spreadsheet package called React-Datasheet installed with npm in my react.js project. The following instructions are found in the GitHub:
import ReactDataSheet from 'react-datasheet';
// Be sure to include styles at some point, probably during your bootstrapping
import 'react-datasheet/lib/react-datasheet.css';
When I compile the code the styling file does not compile with it. What is the method used to add the react-datasheet.css file?
The content currently renders like this:
How do I import the css file to result in a render that looks like this:
Just add this css in your index as what I found is it has further css
https://github.com/nadbm/react-datasheet/blob/master/docs/src/index.css
and add <div className={"sheet-container"}> class or div before rendering ReactDataSheet
I'm using the Quill WYSIWYG editor in a Vue project that I'm working on.
I've installed quill via npm install quill#1.3.6. Files are installed to node_modules/quill/.
When importing the JavaScript I do import Quill from 'quill' in the component that needs it, but in order to include the CSS I have a section in my Vue component like this:
<style scoped>
#import '../node_modules/quill/dist/quill.snow.css'
</style>
This works fine for me - but I'm not sure that this is the best way to include these files/if there is a better way. Is there a better way? I wasn't sure if accessing them through the node_modules directory is the "professional" way to do this or if there are any issues with this approach
This is the correct approach, however you can usually omit node_modules from the path because Webpack will search this path by default (unless you have configured it otherwise):
<style scoped>
#import 'quill/dist/quill.snow.css'
</style>
Alternatively you can import the CSS in JavaScript code like you would any other module:
<script>
import 'quill/dist/quill.snow.css'
</script>
If you import it this way, then you can be sure that the CSS will be bundled only once, whereas I don't think importing it in CSS will de-dupe the styles if you import it in multiple CSS files in your project (but in your use-case this may not be an issue).
I use the create-guten-block repo to create a nice ES6-enabled Gutenberg block for Wordpress. However I want to be able to use scss-variables that are defined in the gutenberg repository here:
https://github.com/WordPress/gutenberg/blob/master/assets/stylesheets/_variables.scss
Unfortunately the assets cannot be installed via an npm package. So how would I include the variables in my custom gutenberg block? I want to do something like this in the block's style.css
import "~#wordpress/assets/styles/variables"
How can I achieve what I want
Install
npm install #wordpress/base-styles --save-dev
Import
#import "node_modules/#wordpress/base-styles/colors";
#import "node_modules/#wordpress/base-styles/variables";
#import "node_modules/#wordpress/base-styles/mixins";
#import "node_modules/#wordpress/base-styles/breakpoints";
#import "node_modules/#wordpress/base-styles/animations";
#import "node_modules/#wordpress/base-styles/z-index";
They also support postCSS and a few other things, check here for the full docs.
That is not possible unless you copied the exact file and referred to it like this inside your scss file
#import "./variables";
What you need to do is create _variables.scss inside the same folder as your main scss file is, then use the code above to import it. You'll have to go inside the file _variables.scss as well and make sure all variables are defined, meaning, import any dependency that is needed for this file. I'm pointing here to the _colors.scss dependency in the same folder, and that's all you need.
You can't use
import "~#wordpress/assets/styles/variables"
this won't work because you're trying to import an npm package, which does not recognize styles.
If I understand your question correctly. You want to use SASS variables inside your custom Gutenberg block, right ?
If you are using create-guten-block. You don't need to install anything. Just include your sass variable in that block's scss files.For example -
If this is your block directory then inside style.scss and editor.scss put the SASS variables.
I hope this helps
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
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?