I have a react application, which uses react-bootstrap + bootstrap-sass.
I´m loading the bootstrap.scss file in my main app.scss like this:
#import '~bootstrap-sass/assets/stylesheets/_bootstrap';
In my page, I implemented a simple Component from React-Bootstrap.
But the modal window has no CSS whatsoever, so it looks really bad.
I´ve tried to load the modal.scss directly
#import '~bootstrap-sass/assets/stylesheets/bootstrap/_modals';
But still no styles are applied.
(the modal appears and hides as expected though).
Bootstrap scss is loaded though, as the styles on buttons, dropdowns, etc is present.
You you need to import the compiled CSS into the component JSX files that it applies to.
Related
So i recently migrated from react to Next.Js, I am facing these issues and want to know if these have a solution :
Unlike react next can't just change a specific part of webpage and keep static part like navbar same throughout all my pages, I have to specifically add my Navbar component to all pages
The {styles.example} way of using css seems like a lot of work, I saw a lot of people using to do css within the js file, but it becomes a mess when I try to make it responsive. Is there any way i can use css just as normal like import it in js file, and use classname='example' in example.module.css
use _app
https://nextjs.org/docs/advanced-features/custom-app
import css in _app is global
https://nextjs.org/docs/basic-features/built-in-css-support
css extended
head(html way, won't apply loaders,make sure resource placed as refered): https://nextjs.org/docs/api-reference/next/head
import css (_app just like head but go webpack, named if not _app): https://nextjs.org/docs/basic-features/built-in-css-support
styled-jsx (inline,scoped by default, set global via prop): https://github.com/vercel/styled-jsx
element-style-prop: the react way
example cases
head in _app: compiled global css like bootstrap reset...
import css in _app: global custom css
head in component: compiled css for component, like date picker
import css in component: named fassion
styled-jsx: css fassion, scoped by default, global if global prop set
element-style: react fassion, element level
When running ng add #angular/material it asks what css framework and theme we want. I selected indigo-pink and scss. Do we need to do anything else, or do the material components just get the theme applied automatically?
With normal css (No CSS framework) we add this to styles.css:
#import “~#angular/material/prebuilt-themes/indigo-pink.css”;
I'm assumed would Angular just does this automatically now since the CSS theme is included in angular.json, however I'm not seeing styles being rendered automatically. Here's a screenshot of the stepper:
Tried adding the below to styles.scss but the error is still there:
/* You can add global styles to this file, and also import other style files */
#import '~#angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
#include mat-core();
Update
I generated a brand new project and tried the minimal setup I have above with the same choices and now it works, so I probably made a small mistake somewhere. I'll leave this up in case anyone comes across a similar issue.
If it were an scss file there might be a difference because there might be variables in it that you would want to reference in your styles file. Since it is a css file the only difference could possibly be the order.
If you have rules in styles.scss they could be overridden by the indigo pink styles but this would happen only if indigo pink comes after your style sheet in angular.json.
Context: I have a Vue CLI project, consisting of two main parts: 1) what the customers see and 2) what an administrator sees. The customer part is using Bootstrap CSS and the other part is using Vue Material. Even though I am planning to rewrite the Vue Material part to Vuetify, the problem will most likely persist.
The problem: The Bootstrap CSS is conflicting with the Vue Material CSS. When the Bootstrap CSS is applied to the Vue Material section, it looks messed up. The other way around too; when the Vue Material CSS is applied to the Bootstrap section, it looks messed up.
Is there any way I could make this work?
This Vue project used to be encapsulated inside a Laravel project, making heavy use of Laravel Mix. I could then use the mix file to compile all the Bootstrap CSS into 1 bundle. This bundle would be referenced in the index page using this line:
<link rel="stylesheet" href="bootstrap-bundle.css" id="bootstrap-stylesheet">
<link rel="stylesheet" href="vue-material-bundle.css" id="vue-material-stylesheet">
Using two layout components in Vue, I could then toggle the stylesheets in like this:
// The Bootstrap layout component:
created() {
document.getElementById('bootstrap-stylesheet').disabled = false;
document.getElementById('vue-material-stylesheet').disabled = true;
}
// The Vue-Material layout component:
created() {
document.getElementById('bootstrap-stylesheet').disabled = true;
document.getElementById('vue-material-stylesheet').disabled = false;
}
It may not be a pretty solution, but it works. Also works in most browsers.
However, I now use Vue CLI instead of Laravel & Laravel Mix. This means I cannot name the generated output as easily anymore.
I have already tried using the CSS deep selector: /deep/ & >>>. But this does not fully work since bootstrap also sets styles to the :root, html & body elements. So when using the deep selector in scoped CSS, those styles are not applied because the end result would be something like this:
.customers-container {
body {
// bootstrap adds style to the body
}
}
The above does not work because the body is not a child of the customers-container but the other way around.
I feel like there might be a solution using bundle names or chunk names or something else from Webpack or Vue config. But my Webpack knowledge is not enough to work this out myself and I cannot seem to find the answer online.
First thing that comes to my mind is just downloading the bootstrap and vue-material stylesheets. Then you can try doing the following, grab the bootstrap stylesheet and wrap it in something like:
.administrator-view {
/// the complete bootstrap stylesheet
}
Do the same with the vue-material but with a customer class .customer-view
Then you can add one of those classes at the HTML or body element whenever you switch between the views.
Don't forget to include both stylesheets!
EDIT: Did a search on the site, you should check Limit the scope of bootstrap styles
I'm working with the Vuetify selector input component, v-select, and I want to custom style it. Since the component renders with only one v-select and no necessary children in the html, I turned to styling the component via inspecting in chrome and copying down the class there. For example, to change the font size of the active value, I used:
.v-select__selections {
font-size: 20px;
}
This worked fine, until I realized my styles in this manner did not work on any parts of the (normally hidden) navigation drawer. For example,
.v-menu__content {
height: 500px;
}
Would not impact the styles in any way. Bizarrely enough, it was not simply my styles getting overwritten by Vuetify styles (!important had no effect) - it appeared that my CSS didn't reach the components at all. There was no trace of any of my written styles upon inspect. How?
I believe this is due to the active-based nature of the drawer-part of the selector component. Is there another way I should be addressing those kinds of elements in CSS? I wish I could provide a Jsfiddle, but (on the templates I've found), Vuetify renders completely differently. I'm using Vuetify 1.1.7.
My styles are included directly in the component .vue file, non scoped. Vuetify and vuetify styles are imported in main.js:
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
File structure (Default structure from vue init webpack -myProject):
src/
-main.js
-app.vue
-components/
-problematicComponent.vue
index.html
Edit: I also tried using deep selectors, but the problem still remained with the hidden menu components:
>>>.v-menu__content {
height: 500px;
}
Therefore the problem I have is different than the problem here:
Vuetify - CSS not working (taking effect) inside component
I once had a similar problem with the vuetify selector component using SCSS. Are you addressing .v-menu__content as nested inside .v-select? Because, interestingly enough, it isn't a child. It is at the same level as v-app (For whatever reason).
Make sure
.v-menu__content {
height: 500px;
}
isn't nested inside any other components in your SCSS.
while writing deep selector write like
.any_parent_class(can be any identifier) >>>> target_class{
}
i tried it with scoped selector , it worked.
like
.flex >>>> .v-menu__content{
}
I downloaded a Web template which is based on bootstrap version 3.
Inside the template I found CSS files named bootstrap-cerulean.css, bootstrap-journal.css, bootstrap-classis.css. Although, I can not find a file named bootstrap.css. What do bootstrap-cerulean.css, bootstrap-journal & bootstrap-classis define or do? Are they themes for bootstrap? Do I still need to reference bootstrap.css if I reference one of the themes such as bootstrap-cerulean.css?
All the bootstrap.css styles are most probably modified and integrated with those three mentioned custom css files that you got with the template so no, you don't need to link the default bootstrap.css anymore unless you're planning to override certain elements on the page to the default style (which I would recommend using a new css file with the few changes kept there for overriding the template's style rather than linking the whole bootstrap.css to the template.