I have started learning React with the "create react app with webpack" configuration. I import css like this in react component js
import '../dist/css/bootstrap.min.css';
import '../dist/css/main.css';
but when webpack compiles the css, my main.css rule is overlapping with bootstrap.css.
How do I fix this without adding '!important' in my main.css and inline styling in .js file? I also have a global css rule to set like h1,h2,h3 dll to separate files?
Related
I have a React app, I am building this app using ParcelJS. In this app I have included an NPM package (zalify/easy-email) which styles its component by using a CSS import:
import "#arco-themes/react-easy-email-theme/css/arco.css";
The import overwrites some of my styles since Parcel treats all css imports as global imports:
By default, CSS imported from JavaScript is global. If two CSS files define the same class names, ids, custom properties, #keyframes, etc., they will potentially clash and overwrite each other. To solve this, Parcel supports CSS modules.
I'd like to not have my styles overridden. According to the Parcel docs I can use CSS modules for this. They state:
To use CSS modules, create a file with the .module.css extension, and import it from a JavaScript file with a namespace import. Then, you can access each of the classes defined in the CSS file as an export from the module.
import * as classes from './styles.module.css';
document.body.className = classes.body;
Is there a way to pass the imported CSS module to the component that expects the CSS import without having to edit the component? The component from the NPM package expects the style as global style, not a CSS module.
I have tried to import the style using require in the functional component instead but the css is still loaded globally.
Trying out the new React Server Components (with Next.js), but when renaming _app.tsx to _app.server.tsx, TailwindCSS styles are not loaded at all (html renders fine though).
_app.tsx is the one importing the global index.css file with all the #tailwind directives.
Tried to move this css import to ...client.tsx component, but apparently Next doesn't allow it.
Has anyone had success making Tailwind work with server components?
In the tailwind.config.js file, you should apply what folders and files tailwind needs to affect like so:
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
also, check that you followed the installation proccess of tailwind into your next.js project:
https://tailwindcss.com/docs/guides/nextjs
In a React app, we usually import CSS files into the JavaScript components.
I thought this way we inject the CSS into the final JavaScript build.
However, it seems that React (at least create-react-app) still generates separate CSS files.
Why is that?
Is there any way to force CSS stylings to be part of the final r? Kind of CSS-In-JS?
You should eject the create-react-app and change webpack config file (style-loader similar question) to not create separate file for css bundle or use html-inline-css-webpack-plugin.
Currently I use sass, images, and jsx files and I would like to know if there is a standard.
For example, currently I'm doing this:
"/src
/components
App.jsx
App.scss
/Header
Header.jsx
Header.scss
/utils
index.js"
In my App.jsx (Example importations)
import Header from './Header.jsx
import appSass from './App.scss'
There are many ways good practices in organizing your files, I am currently going through a coding bootcamp and they showed us this process of organization:
/src
/components
/app
index.js
app.scss
/header
index.js
index.scss
/lib
util.js
/style
main.scss
_reset.scss
_vars.scss
_layout.scss
_base.scss
main.js
In your main.js you can import your app component with:
import App from './component/app'
and in your app.js (and other components) you will can import using:
import Header from './header'
I found this a nice way to keep things organize and makes your imports more uniformed where you aren't trying to figure out which directory level you are storing each component.
It also is a good way to organize sass files, inside the style directory you have all your sass files that has to do with the styling of your overall app. main.scss imports the other files and dictates which scss you want applied first (usually a reset/normalize). Each component directory will also contain a sass file that will dictate the styling for that single component.
I have a .css file that is hosted online. How can I import it in to my react component?
import mystyles from 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css';
this results in an error
Module not found: Error: Can't resolve 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css' in '/Users/busda001/code/electrode-app/src/client/components'
You have 2 choices to include CSS in your react project,
First, you can put the link in the main HTML project page which has all react project.
Second importing in your file.jsx as you do now, but you nee in this way CSS loader in your server, if you use webpack.config.js
use this link to learn what should you do,
How to include a CSS from bower_components using webpack dev server?