Styles in .scss file not applied - javascript

I have a react app and use .scss files for styling.
My index.js looks like this:
import './App.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
My App.scss looks like this:
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
height: 100%;
}
body,
:global(#root) {
min-height: 100%;
color: var(--primary-font-color);
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 22px;
}
h1 {
color: var(--primary-font-color);
font-size: 32px;
font-weight: 600;
line-height: 36px;
}
:root {
/*Colors */
--primary-color: #f6f5f2;
}
Now my problem is that all the styles apart from *,*::before,*::after and :root are not applied.
In the browser console I can see that the App.scss is used and the *,*::before,*::after styles are applied. Also all vars from :root can be found there.
I want to use the App.scss file for global styles, but the only way I found to apply them is with an #import("App.scss") in a component.module.scss. Importing the App.scss to every module results in as many duplicates as imports. Is this the intended way to handle scss styles?

Sass is not recommended to use today for global styles, because as they wrote -> it can generate more files than you want -> effect is that you have worse performance
This information we can read on their main page
I recommend you use once simple CSS file for variables, global styles then easily you can reuse them and if you wanna use Sass as a developer then go-ahead for the rest of styling
Best!

For example what you can do
App.css:
body {
margin: 0;
font-family: Lato, Helvetica, Arial, sans-serif;
transition: all 0.3s linear;
}
:root {
--facebook-color: #507dc0;
}
And then:
Login.scss
body {
.login {
background-color: var(--facebook-color);
}
}
Of course this is only example.

I found the a solution:
Looks like it was the :global(#root) which caused the problem. Removing it makes the other styles applied no matter if they are in a .scss or .css file.

Related

How to import font family files properly react

I cannot import my font files, dont know why is not working.
Here what I did:
Create font folder and added font-files inside
fonts/avenir.woff
fonts/avenir.woff2
in body setup font-faimily
body {
font-family: Avenir;
// Open-Sans, Helvetica, Sans-Serif;
font-style: normal;
font-size: 14px;
background: ${colors.offWhite};
}
Call the font-face:
#import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=7ba9e0a7-abe8-437c-a682-27fa19a01908");
#font-face{
font-family:"Avenir LT W01_35 Light1475496";
src:url("./fonts/avenir.woff2") format("woff2"),url("./fonts/avenir.woff") format("woff");
}
And still does not work
Where I am making a mistake?

What are the effects of directly importing a .css file into a javascript file?

I have found this index.js, on the root level of a React project.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
The index.css:
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#font-face {
font-family: "Publico-medium";
src: url('./assets/fonts/publico-medium.woff') format('woff');
}
#font-face {
font-family: "Roboto-bold";
src: url('./assets/fonts/roboto-bold.woff') format('woff');
}
#font-face {
font-family: "Roboto-medium";
src: url('./assets/fonts/roboto-medium.woff') format('woff');
}
#font-face {
font-family: "Roboto";
src: url('./assets/fonts/roboto-normal.woff') format('woff');
}
What are the effects of this import?
From the React docs:
In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified .css file in the build output.
Reference: https://create-react-app.dev/docs/adding-a-stylesheet/

reactJS not applying styles (.less files)?

I have been trying to search on the topic but it seems that I might be using the wrong terms as I cannot find any information....
I am trying to get this package to work..(https://github.com/wangzuo/input-moment)
I have succeeded in getting the calendar to work, it saves the date, but it will not switch to the time tab and it also does not style correctly, even though I have imported the .less files into my react component.. the file looks like this...
require('input-moment/src/less/input-moment.less')
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import moment from 'moment';
import InputMoment from 'input-moment';
class Date extends Component {
constructor(props) {
super(props);
this.state = {m: moment()}
}
handleChange(m) {
this.setState({ m });
}
handleSave() {
console.log('saved', this.state.m.format('llll'));
}
render () {
return (
<InputMoment
moment={this.state.m}
onChange={this.handleChange}
onSave={this.handleSave}
/>
)
}
}
and yet my component looks like this...
Can you see any obvious reason as to why the component will not style correctly like the example on github...(http://wangzuo.github.io/input-moment/)
You probably aren't getting the styles provided by the package. If you used npm to install the package, then your import statement could look like this:
require('input-moment/dist/input-moment.css')
Also, compare your App.css to the CSS used by the package author in the example, which can be found at https://github.com/wangzuo/input-moment/blob/master/example/app.less, source is repeated below
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 0;
font: 87.5%/1.5em 'Lato', sans-serif;
}
.app {
max-width: 400px;
margin: 0 auto;
margin-top: 90px;
padding: 0 20px;
.input {
margin-bottom: 20px;
}
input {
padding: 7px 8px;
font-size: 14px;
width: 100%;
}
}

How to prevent outside CSS from adding and overriding ReactJS component styles

I have a custom ReactJS component that I want to style in a certain way and provide as a plugin to many different web sites. But when web sites use global styles (Twitter bootstrap or another css framework) it adds and overrides styles of my component. For example:
global.css:
label {
color: red;
font-weight: bold;
}
component.js:
class HelloMessage extends React.Component {
render() {
let style = {
color: "green"
};
return (<label style={style}>Hello</label>);
}
}
result:
Above I didn't use "font-weight: bold" in my component's style but in result my component is using it.
I'd like to be able to encapsulate my custom components's styles in a way that makes them look the same across all the web sites.
The best approach in my view is to define some kind of reset class for your component and put in a set of css resets you can find out there
(e.g. http://meyerweb.com/eric/tools/css/reset/)
The definition in a sass file could look like this:
.your-component-reset {
div, span, object, iframe {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
// add some more reset styles
}
To avoid writing a lot when you don't want to use sass just use the universal selector *:
.your-component-reset * {
margin: 0;
padding: 0;
font-weight: normal;
// other reset styles ...
}

How to import a font into an Ember project

I am creating a website using the MEEN Stack (Mongo, Ember, Express, Node). And right now, I am trying to import the Lato font family into my project as that will be the font of everything on the website. I seem to be having trouble with this and can't find any resources online that cover this. Any ideas on how to do this? I've downloaded the Lato font and put the files in my public/assets/fonts folder and am still having problems. I am also using foundation if that helps.
I have this in my app.scss file:
/* Webfont: Lato-SemiboldItalic */#font-face {
font-family: 'LatoWebSemibold';
src: url('fonts/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
src: url('fonts/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
url('fonts/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
url('fonts/Lato-SemiboldItalic.ttf') format('truetype');
font-style: italic;
font-weight: normal;
text-rendering: optimizeLegibility;
}
nav {
font-family: "LatoWebSemibold";
background-color: none;
width:150px;
text-align:left;
font-size:1em;
list-style: none;
margin: 0 0 0 0;
padding: 0 20 30 20;
float:left;
}
I think your missing '/assets/' in the url
below is my working example
#font-face {
font-family: 'Mytupi-Bold';
src: url(/assets/fonts/mytupibold.ttf) format('truetype');
}
I was trying to import a local font file into my ember addon.
Sheriffderek posted a nice mixin here but I kept seeing 404 errors.
I eventually got it working by putting the name of the app at the beginning of the font URL.
$font-url: '/<app/addon-name>/fonts';
#mixin font-face($name) {
#font-face {
font-family: $name;
src: url("#{$font-url}/#{$name}.woff2") format("woff2"),
url("#{$font-url}/#{$name}.woff") format("woff");
}
#include font-face('font-name-500');
body {
font-family: 'font-name-500';
}

Categories

Resources