currently I am playing around with Preact's default project and I want to integrate with Bulma Sass framework to build an UI.
I have searched but have not found a correct way in my case. I don't want to use Typescript or Bulma Components for Preact. Just want to use Bulma on HTML level.
Any suggestions or documentation on this ?
Okay, I have solved it as :
npm install --save-dev node-sass sass-loader#7.3.1
npm install bulma
By the help of these documentations : Using CSS preprocessors & Bulma CSS with React
Note : sass-loader#8.0.0 has compatibility issue with Preact
Related
Can anyone help me out to solve this problem.
As I am learning React Native, I was going through styled components but was facing an error related to styled components not compatible with react18 version. and same works in react#16 and below
I was trying to install styled-components for styling components in react-native. And i was receiving error saying that react18 is not compatible. I just want styled components to work
Try to install it with this command
npm install styled-components --force
I sorted the solution as styled-component was not working for react 18.0.2.
So I decided to uninstall react 18.0.2 by using npm uninstall react#18.0.2
and then
I reinstalled npm install react#17.0.2 and then I read the documentation of Styled Component
and installed styled-components using yarn add styled-components and successfully sorted out my problem.
npx expo install react-dom
This fixed it for me (using expo managed react-native app)
https://github.com/styled-components/styled-components/issues/3788#issuecomment-1335191911
I had same problem when taking Udemy course about React Native. This course provides git with complete code, so what I did was:
Downloaded packages.json file from git url provided with course (last version),
Deleted my project node_modules folder,
Deleted my project packages-lock.json file,
Executed npm install
I want to use the Slider component from Material UI in my React app.
The Slider is part of 'Lab', a 'package that hosts the incubator components that are not yet ready to move to the core.'
npm install #material-ui/lab
npm install #material-ui/core
Do I still need to install Core Material UI to my project or can I only add the Lab?
I do not want to add more bulk to my already big project.
#material-ui/lab have dependency on #material-ui/core, so you must need to added #material-ui/core.it's your choice how you added npm install or cdn
here some useful for you i guess:
#material-ui/core cdn reference: Here
#material-ui/lab cdn reference: Here
or you can try ant.design
they have some awesome tools for you.
Thank You :)
#material-ui/lab has #material-ui/core as a peer dependency. So yes you do need to add it. However if you're concerned about bundle size then rest assured that importing a lab component will not add the complete core to the bundle. It will only add what's necessary.
I recently migrated a create-react-app to typescript. After migration my scss files are being ignored in the .tsx components. I'm importing the files like so:
import './styles/scss/style.scss';
this was working fine in js. I've already installed node-sass and even tried installing #types/node-sass. I'd like to do this without ejecting. Would appreciate any help.
According with this documentation https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
If you use react-scripts#2.0.0 or higher just
npm install node-sass
restart and enjoy.
I'm using create-react-app in my project but when I try to use scss instead of css it breaks.
I have tried to install dependencies node-sass and saas-loader - still nothing.
I've also tried to change the temple for parcel but then nothing is rendered.
Can you please help and show me the way to switch to scss in this project?
https://codesandbox.io/s/5y9nr49y44
Thanks
codesandbox does not support sass compile with the create-react-app, see issue: https://github.com/CompuIves/codesandbox-client/issues/75
Using Parcel template should work, see example here: https://codesandbox.io/s/rjj38yzm14 (kudos to CompuIves)
By default create-react-app does not support using css preprocessors (such as scss, less, stylus), so your option if you really want to use .scss in your project is to eject and use a webpack loader (sass-loader) for this.
I will be using Semantic-UI-React in my project but I came across following issues:
Docs link : https://react.semantic-ui.com/usage#css
Docs say webpack 1 is supported but not recommended. I am using Create React App which comes with webpack version 1.14.0. So does that mean I should not use Semantic-UI-React with CRA?
For styling, I also want some custom styles in my project , so I went with third option of Semantic UI package mentioned in the docs..
npm install semantic-ui --save-dev runs gulp internally and creates a semantic folder. But there is no dist folder as mentioned in the docs. From which path I should refer the semantic.min.css in my index.js file?
I am basically trying to use Semantic-UI-React with semantic.min.css with some of my own styles on top of it. But it seems I am making some mistake in the setup. Another option may be to go ahead with Semantic UI CSS package ? ...but according to docs I will not be able to use custom styles with this method.
I am a bit confused here , please help :)
The SUI-React docs comment about not recommending use of Webpack 1 is simply because it's not the latest version of Webpack. Webpack 1 still works fine in general. Also, the current version of Create-React-App (1.0) uses Webpack 2, and if you haven't "ejected" your CRA project, you can easily upgrade the react-scripts dependency to use the latest version.
If you want to build a custom Semantic-UI CSS file, yes, you would install the semantic-ui package, and that will create a semantic folder containing Semantic-UI's LESS source files and build system. From there, you would make any edits to SUI's source for your customization. Once you've made your edits, run gulp build inside that semantic folder, and it will create a semantic/dist folder containing the compiled CSS files (per the instructions at https://semantic-ui.com/introduction/build-tools.html ). Finally, you would copy the generated CSS files into your project, probably inside the src folder, and import those in your JS source.
If you don't care about generating a customized Semantic-UI CSS build, you can npm install --save semantic-ui-css, which has a pre-built version of the default Semantic-UI theme, and import the CSS from there.
For what it's worth, my own "Practical Redux" tutorial series uses Semantic-UI-React and the semantic-ui-css package, and I show how to add semantic-ui-css in Practical Redux, Part 4: UI Layout and Project Structure. (I've also used a custom Semantic-UI CSS build in my "real" project at work.)