I am working on porting an existing React App to ReScript React, however I am running into a few issues. Namely I can't for the life of me figure out how to import CSS in ReScript, for example, In React to import Bootstrap all I would have to do is:
import 'bootstrap/dist/css/bootstrap.min.css';
However there is no corresponding way to do this in ReScript (to my knowledge), I tried doing:
#module("bootstrap/dist/css/bootstrap.min.css")
But it doesn't work. How can I import CSS files in ReScript React?
Use a %%raw expression to import CSS files within your ReScript / React component code:
// in a CommonJS setup
%%raw("require('./styles/main.css')")
// or with ES6
%%raw("import './styles/main.css'")
Reference - https://rescript-lang.org/docs/react/latest/styling
Related
Can I Import css files directly into a component in Nextjs and use the classnames directy without the default named import method.
I have a huge html project and I want to convert it into Nextjs, But the styles are conflicting when I import it in the _app.js file, and if I convert the style files into .module.css files and import with a name, then I have to manually change every where.
Is there anyway to solve this?
Here my project
https://codesandbox.io/s/dreamy-booth-if8f5?file=/pages/index.js
When I create _app.js and place import after that the styles don't work as expected. Wondering why...
I have a Dashboard.tsx file and Dashboard.scss file (I'm using vscode)
I'm trying to import the scss file like so: Import * as style from './Dashboard.scss'
but it can't find the module,
I tried also import style from './Dashboard.scss'
same error,
even tried renaming to Dashboard.module.scss which eliminated the problem but react code won't compile.
Don't import it as named. simply use import "./Dashboard.scss"; and It should work.
I am creating a multi-page application using ReactJS and I want different styles for different pages, especially the logo position.
This is my App.js file
import React from 'react';
import Login from './user/Login';
import Auth from './user/Auth';
import Home from './user/Home';
import ResetPassword from './user/ResetPassword';
import './App.css';
const App=()=>{
//ROUTING
}
export default App;
The last imported file always overwrites the styling properties of the entire app. I need to change the position of the logo in each page accordingly and also other things. How do I add different css properties for each page?
You can use or module css (for this you have to do changes in webpack).
https://programmingwithmosh.com/react/css-modules-react/
Also you can use package styled components https://www.styled-components.com/
In this case, you have unique styles for all components.
Create a folder structure as below. And import their own css files. If you are using sass use unique class names. For the 3rd party components, you may need using "!important" in the css files.
common/
Avatar.js
Avatar.css
feed/
index.js
Feed.js
Feed.css
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
and you can read this : https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
I have an app created using react-create-app tool and I use a style.less file in src/assets/less that is compiled automatically.
In my style.less I import the style I have in the various react components in my app. I like the idea to have every component with his own style.less in there.
The first problem is the reference I have to add or update in the src/assets/less/style.less, every time I add a component or I rename it or I move it. Is there any way I can get all the import automatically?
If your webpack.config.js is configured correctly, you should be able to import each components styles like:
import './style.less';