I have this css class .number in my React app which I use for numbers in a code editor. This style works perfectly locally, when I start the app with npm start. However, when deployed, this .number class gets overridden by some other .number class, which I have no idea where it comes from, it's no where in my code, and it breaks my style. Đ¢his is the style from my deployed app (pic 1). The first .number is my class, defined in index.css and this other is defined in other.sass but this file doesn't exist in my code.
The second photo describes the style used in my local app. As you can see, this style and that from other.sass do not correspond. This is the code as well:
.number {
align-items: center;
border-radius: 9999px;
display: inline-flex;
text-align: center;
vertical-align: top;
}
Do you happen to know what is the potential reason for this kind of bug, how can I debug it and how can I fix it?
This looks like some kind of bundler (webpack, parcel) or postprocessing (PostCSS, ...) is runnning via an npm script and generates the "confusing" part which you don't understand and is wrong here.
I would first try to understand which npm script runs when you deploy the app to find out which process generates the interfering class and fix it there. Usually, the command for this script can be found in the package.json in the build script.
If this does not work, simply rename the .number class to .example-number to give it a higher specificity, so that the correct styles are being applied.
Related
I'm a backend developer tasked withed moving a front end from a custom framework to React. (Spare a thought for me please).
I've come across CSS classes within other CSS classes such as:
content.document{
display: flex;
.important{
background-color: #FAD08A;
padding: 20px 0;
border-radius: 5px;
position: relative;
img.important{
width: 70px;
float: right;
}
h2 {
font-size: 16px;
color: #ccc;
text-align: center;
line-height: normal;
}
}
}
I have never seen this way of doing CSS and of course if I paste it into a normal CSS file, it doesn't work.
Is there a library that would all me to have CSS classes defined within other CSS classes (such as how h2 is defined in .important above)? I'd rather not have to modify tons of CSS to get this to work.
This is sass. There is sass and scss syntax. The one you have above is scss. They have .scss or .sass file-types. Sass-Variant drops the brackets and works with indents alike CoffeeScript or YAML.
Since you are using React now, you can just install a "sass" package with yarn add or npm install command. There are different versions of sass because of legacy and different environments. You can decide if you want to install it locally (per project) or globally (-g flag for npm).
Usually, I go with the package named sass. You could probably also use dart-sass. If you want to get fancy: more-details-about-sass-variants.
You can read more here: https://create-react-app.dev/docs/adding-a-sass-stylesheet/.
This tool supports sass and scss with different setups: sass playground
As Jon mentioned, it is written in SCSS. You can try to use an online tool that converts SCSS to CSS.
In my Angular project, I have scss rules that describe how components should look when in the context of another component. Example:
:host-context(my-table my-row.header){
font-weight: 500;
white-space: nowrap;
height: 40px;
color: #6d6d6d;
background-color: #f3f3f3;
}
This works fine when working on localhost, however when I build it for production & put it live it does not apply that styling. Not sure what the difference would be?
Looking for suggestions on how to fix this so that the styling shows on production as well as development.
Okay after googling & experimenting a bunch I finally figured out how to fix the issue, although I have no idea why or why it works in dev but not in prod.
Essentially, if you use :host-context with multiple selectors, like so:
:host-context(my-table my-row){ ... }
It works in dev but will not work in prod.
Instead you should replace that with:
my-table my-row :host-context{ ... }
If you're only using one selector inside like :host-context(my-table){ ... } it works as expected on both prod & dev.
Credit to this comment I found https://github.com/angular/angular-cli/issues/8577#issuecomment-379177320 for giving me insight into how to move foward.
In my scss file I am importing a third-party css file
#import 'icons/third-party-icons/style';
Unfortunately, this style is missing the value for the color style
.mySelector {
content: "\eac2";
margin-left: -1em;
color: ;
}
As expected, node-sass is throwing the following error:
ModuleBuildError: Module build failed (from
./node_modules/sass-loader/lib/loader.js):
color: ;
^
Style declaration must contain a value
Is there any way to configure node-sass to ignore this invalid property?
In my opinion, that error report is there for a reason, you shouldn't have empty definitions as that is technically an error. In unminified CSS you wouldn't have an issue it would just appear as strikethrough in the element inspector in the browser, but in this case you break the minify process.
Instead of importing it you can download the CSS code if possible and save it in your project locally then solve the issues manually. It won't matter what you do later in your CSS file, the error will appear. Or else you can try to link the CSS in the header. If you are using PHP or similar serverside scripting then create a separate header.php (for example) and include it into every file. This way you will need to copy and paste the link once and you can access the style at every page.
You could override the imported css. The code is looking to use a value, but can't because it's null.
You could include in your style tags:
.mySelector {
color: black !important;
}
That !important will override whatever is imported from the stylesheet, and you class in the body will use that color instead of trying to use the null color.
I want to override the default values in scss file like
.auth-form {
width: 800px;
}
I change the width values in class auth-form scss file. But it is not working.
How to override the values in scss file. Please let me know.
Making assumptions on what will be the case you are probably facing a scope issue. If you have the following css:
.foo .bar {
color: red;
}
.bar {
color: blue;
}
.bar will always be red, because you are not overwriting the selector in the correct scope.
So in your case you need to specify the full selector:
.full.scope .auth-form {
width: 800px;
}
Where .full.scope is the full selector to .auth-form. You can get the full selector using on the css you eqnt to overwrite using the browser inspector.
Another option will be to make the property prioritary using the !important css keyword so it will overwrite any previous definition:
.auth-form {
width: 800px !important;
}
Hope it helps.
.scss (sass) files are not directly loadable into browsers, they need to be compiled to .css files first, then those are loaded into browsers by your application.
It seems you are not performing the compilation step (also called preprocessing or precompiling) and this is the reason you do not see the modification in your app.
How the compilation should be done varies. You may use sass directly (see here) or if you are using a framework there may be tools that combine this and other automation steps. For instance in Ruby-on-Rails you would install the required compile tool in the form of a gem and run:
bundle exec rake assets:precompile
As you do not provide details on your environment / framework is is difficult to provide the exact procedure applicable to you.
I'm playing around with React Toolbox and I've noticed (not that you'll miss it) that the components are rendering really big. Here's an example:
I'm sure that that can't be correct, that toolbar's height is pretty big and those checkboxes.. well.. Is there something that I'm missing? This is the first time using React Toolbox.
I'm not sure if this might have something to do with the Layout component? You can check it out in the documentation here. It goes on to describe how it has all these fancy breakpoints, but I have no idea how to actually implement and work with them?
"Is there something that I'm missing?"
No, nothing to worry :)
You're just seeing the default styles of the react-toolbox components as they are defined in the package.
Take a look inside node_modules/react-toolbox/lib/. Your sass-loader in webpack.config.js compiles and injects those styles (because node_modules is not excluded explicitly).
But of course you can OVERRIDE these default styles by defining your own .scss or .css files in your project.
All component's in react-toolbox accepts a property className.
ie you can do
styles.css (go with .scss if you like that more)
.myCustomInput {
font-size: 10px;
height: 12px;
background-color: #ccc;
padding: 3px 5px;
}
AddToDo.js
import { Input } from 'react-toolbox';
import styles from './styles.css';
...
<Input className={styles.myCustomInput} />