I'm trying to customize my ReactJS/Webpack application using Bootstrap 4.
I've build a single file called globals.scss as:
// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.
// Colors
//
// Grayscale and brand colors for use across Bootstrap.
// Start with assigning color names to specific hex values.
$white: #fff !default;
$black: #000 !default;
$red: #d9534f !default;
$orange: #f0ad4e !default;
$yellow: #ffd500 !default;
$green: #5cb85c !default;
$blue: #0275d8 !default;
$teal: #5bc0de !default;
$pink: #ff5b77 !default;
$purple: #613d7c !default;
// Create grayscale
$gray-dark: #292b2c !default;
$gray: #464a4c !default;
$gray-light: #636c72 !default;
$gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: $blue;
$body-color: $gray-light;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-family-serif: Tangerine, Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-base: $font-family-serif;
In my code, I'm importing this file just after bootstrap, as:
import "bootstrap/scss/bootstrap.scss";
import "./globals.scss";
The full ReactJS component code:
function DemoApp() {
return (
<div style=>
<Helmet>
<html lang="en" />
<title>{config('htmlPage.defaultTitle')}</title>
<meta name="application-name" content={config('htmlPage.defaultTitle')} />
<meta name="description" content={config('htmlPage.description')} />
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="msapplication-TileColor" content="#2b2b2b" />
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png" />
<meta name="theme-color" content="#2b2b2b" />
{/*
A great reference for favicons:
https://github.com/audreyr/favicon-cheat-sheet
It's a pain to manage/generate them. I run both these in order,
and combine their results:
http://realfavicongenerator.net/
http://www.favicomatic.com/
*/}
<link
rel="apple-touch-icon-precomposed"
sizes="152x152"
href="/favicons/apple-touch-icon-152x152.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="144x144"
href="/favicons/apple-touch-icon-144x144.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="120x120"
href="/favicons/apple-touch-icon-120x120.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="114x114"
href="/favicons/apple-touch-icon-114x114.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="76x76"
href="/favicons/apple-touch-icon-76x76.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="72x72"
href="/favicons/apple-touch-icon-72x72.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="57x57"
href="/favicons/apple-touch-icon-57x57.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="60x60"
href="/favicons/apple-touch-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/apple-touch-icon-180x180.png"
/>
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#00a9d9" />
<link rel="icon" type="image/png" href="/favicons/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="/favicons/favicon-128.png" sizes="128x128" />
<link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32" />
<link rel="icon" sizes="16x16 32x32" href="/favicon.ico" />
<meta name="msapplication-TileColor" content="#2b2b2b" />
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="/favicons/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="/favicons/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/favicons/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="/favicons/mstile-310x310.png" />
<link rel="manifest" href="/manifest.json" />
{/*
NOTE: This is simply for quick and easy styling on the demo. Remove
this and the related items from the Content Security Policy in the
global config if you have no intention of using milligram.
*/}
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine"
/>
</Helmet>
<Header />
<div style=>
<Switch>
<Route exact path="/" component={AsyncHomeRoute} />
<Route path="/counter" component={AsyncCounterRoute} />
<Route path="/about" component={AsyncAboutRoute} />
<Route component={Error404} />
</Switch>
</div>
</div>
);
}
export default DemoApp;
I can't get my globals to be considered. The original boostrap body fonts and colors still remains on the app.
I don't want to use the _custom.scss as it relies inside my node_modules folder, and I don't want to touch that. BTW, if I put the style changes inside _custom.css it works well.
For some reason my globals.scss is not being considered, but I don't know why. Help appreciated.
via Mendes
No comments:
Post a Comment