I am digging a npm project, that project use .scss file for styling.
It imports style like below:
import styles from './node-content-renderer.scss'
and use it like an object to component's classname.
<button
type="button"
className={styles.collapseButton}
>
How does it can use styles like above? When I try that in my local environment, the styles is just {} (empty object). Even I install node-sass to my project.
The exist code link is : https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/blob/master/node-content-renderer.js
It use scss file like js object. How can I do that in my project? Should I set up some webpack config? Is there a any easier way that not disrupt my create-react-app based project?
This feature is available for react-scripts above 2.0. You should follow the pattern from documentation: https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet
Related
I have upgraded to the latest Create React App 4.0. Now the scss cannot resolve image assets in the public folder. I was using CRA 3.4.1 before. It worked fine.
Any ideas? I don't want to use npm eject
The icon.svg is in public/images
background-image: url(/images/icon.svg);
Failed to compile.
./src/Components/style.scss
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!
./node_modules/postcss-loader/src??postcss!
./node_modules/resolve-url-loader??ref--5-oneOf-6-3!
./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!
./src/Components/style.scss)
Error: Can't resolve '../../../../../../icon.svg' in ''
In Create React App 3.x, referencing an image from the public folder in (S)CSS worked by simply using a starting slash, as has been been answered here.
As the OP has explained, the image is in public/images and is being referenced as url(/images/icon.svg).
This doesn't work in Create React App 4.0.0 anymore and gives the error message Error: Can't resolve '../../../../../../icon.svg' in ''. The changelog of Create React App doesn't mention a breaking change regarding the public folder.
I think it is deprecated in CRA 4, (after all.. it was a breaking change..)
there are some workarounds using craco but I suggest to move these files to the src folder.
Try to change to this: (webpack should resolve this to the 'real' path)
background-image: url(./icon.svg);
I know you wanted to add the image as a background-image css property, but maybe another approach is relevant for you.
When you import like this you use it exactly as you would use a normal Component:
import { ReactComponent as Icon } from'<path_to_resource>/images/icon.svg';
<Icon />
Source:
https://create-react-app.dev/docs/adding-images-fonts-and-files/
As a temporary workaround, you could move the images into src/, import them directly in the components import myImage from '../file.svg' and set style={{ backgroundImage: file }}>?
I am trying to customize the theme when using Semantic-UI-React, there are detailed instructions on how to customize themes in Semantic-UI, like we can override variables to change their styles.
But I didn't find any way to customize themes with Semantic-UI-React, since there is no semantic/src/themes and semantic/src/site folders for us to make changes, what comes with Semantic-UI-React is just the default CSS file (the file we import in our index.js file "semantic-ui-css/semantic.min.css").
Is there any way we can customize the theme in Semantic-UI-React? Thanks in advance!
This link may also help in addition to the theming page on the docs site.
https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/
It has a setup script after you run
npm install --save-dev semantic-ui
Yes there is a way to customize themes and create your own
https://react.semantic-ui.com/theming/
Basically just follow instructions from the docs link, install semantic-ui-less, which are not compiled Less files for the Semantic-ui CSS, craco-less which is just a path plugin for CRA configured Webpack so your Less compiler can find files properly without ejecting your CRA, move the files to created folder, modify theme.config, start app and you are ready to customize your own theme, although I didn't find some kind of API for variables on Semantic-ui docs, so I had to browse semantic-ui-less package files for them.
One problem I encountered was that I tried changing the theme for all components in theme.config and it was throwing errors about missing fonts and variables. Don't do this, it's not gonna work, check the Semantic-ui docs about theming, there is a note about it
Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.
https://semantic-ui.com/usage/theming.html#browsing-for-themes
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.
I am trying to use material UI with react.
On this website: https://jamesmfriedman.github.io/rmwc/installation
It says
material-components-web should be installed automatically as a peer dependency. Include node_modules/material-components-web/dist/material-components-web.min.css in your project via your method of choice (using a link tag, a css-loader, etc.).
But I am not sure what this actually means. How and where do I have to import that file to use this library?
At first, you should add the library to your project by running:
npm install --save rmwc or yarn add rmwc
Secondly, you should understand the following:
Generally speaking, Material Components Web library is actually a bunch of prebuilt design styles that you can link to your project to make it look Material.
The library that you are using, React Material Web Components [RMWC], is a React wrapper for the previous library. It means that it gives you a set of flexible React Components like <Button />, <TextField />, etc that are built in React and act in a virtual DOM.
It doesn't give any specific styling to the elements. Moreover, it is designed not to provide you any extra styling. To make your imported React components look Material, you should add the styling from the parent library [Material Components Web].
To add styling from that library, use the following:
Add it to your project:
npm install material-components-web or yarn add material-components-web
And then use the following line (use it once in your project):
import 'node_modules/material-components-web/dist/material-components-web.min.css';
RMWC does the ReactJS wrapping. The styling is still all done by MDC.
You can add the minified mdc css file to your project, but that will not give you much customization. I'd advise using sass for your project and importing that mdc modules there. This way you can change variables e.g. from primary color as explained here: https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme
$mdc-theme-primary: #fcb8ab;
$mdc-theme-secondary: #feeae6;
$mdc-theme-on-primary: #442b2d;
$mdc-theme-on-secondary: #442b2d;
#import "#material/button/mdc-button";
A more in depth documentation on how to use styling specifically with RMWC can be found in the docu: https://jamesmfriedman.github.io/rmwc/styling
But overall you can either create your own classes you then apply to your elements such as buttons. E.g.
.my-button-style {
border-radius: 10px;
}
Or you override the mdc classes directly.
.mdc-button {
border-radius: 10px;
}
The mdc classes can be found in each of the package sites on GitHub. (e.g. for button: https://github.com/material-components/material-components-web/tree/master/packages/mdc-button)
I downloaded the latest font-awesome 4.7 and extracted the files in my public folder of the react app. I linked it in the index.html like this <link href="./fontawesome/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">. Should I be doing this? Or should I put these in a a folder within the src directory? I never quite understood what I should be putting in the public folder.
You should use one of the well known open source projects for react \ react-native icons:
React: react-icons
React-Native: react-native-vector-icons
You should then import only the icon you want, for example (from Font Awesome):
import FaBeer from 'react-icons/lib/fa/beer';
You should use command prompt & install using NPM https://www.npmjs.com/package/react-fontawesome.
And then just include using var FontAwesome = require('react-fontawesome')
You also need to include below stylesheet in index.html.
font-awesome.min.css
I have used this in my project & it turned out quite well.