I am looking to start a new react project and I was hopeful about using bootstrap-material-design but I'm not sure how to setup the project to overwrite the theme. The documentation talks about adding custom sass but I am not familiar with sass. I was hoping someone knew what step you need to get this working. I've created a fresh react app with npx create-react-app and installed the package with npm via npm install bootstrap-material-design#4.1.1. I've also added a scss folder at the root level of the project with a custom.scss file in that folder. currently the only code added to that file is an import of their sass files with #import "node_modules/bootstrap/scss/bootstrap"; but nothing seems to happen when I add a material design component such as a Navbar. I also import the custom.scss file in the index.js file with import './scss/custom.scss'; but I am still getting the following error: File to import not found or unreadable: ../../node_modules/bootstrap/scss/bootstrap.
I guess my question is has anyone successfully used this package in a react project by using npm to install rather than using the cdn and if so can they tell me the steps require to get this up and running so I can re-theme bootstrap-material-design with my own branding.
Thanks!
Install required package
npm install bootstrap-material-design node-sass
Add SASS path
open .env, add following magic
SASS_PATH=node_modules:src or SASS_PATH=./node_modules;./src for windows
Rename App.css to App.scss
Open App.scss
Add following code: #import 'bootstrap-material-design/scss/bootstrap-material-design.scss';
So far work for me.
Related
I installed tailwindcss inside of my Next.js application. This was the error message that I received
error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Cannot find module 'xwind/babel'
This is how I installed the Next.js application:
npx create-next-app -e with-tailwindcss ./
These are the dependencies I installed:
npm install graphql graphql-request html-react-parser moment react-multi-carousel sass
Happened to me as well just few minutes ago. Not sure if that is the same case for you. It created for me components folder, .babelrc file and js files in pages folder. Not sure if that is your case, but that's what happened to me. In case just follow with solution below.
Solution
Remove .bablerc file and components folder along with js files in pages folder.
More details
This is strange because if you look at the repository of Next.js example with-tailwindcss. It doesn't have those. Not sure how that happened. We can elaborate more in the comments.
Also plugin for babel xwind/babel does have dependency check to allow only tailwindcss version <2. There is an issue for that. In my opinion this repo is unmaintained and will either get forked and replaced as a main for npm package or something similar.
The create-next-app is installing with-tailwind-emotion template instead of with-tailwind for some reason.
For now, a good way is to create a normal typescript template with create-next-app and add tailwind manually.
So your steps would be:
Step 1:
without typescript:
npx create-next-app ./
or with typescript:
npx create-next-app --ts ./
Step 2:
Docs to install tailwind with next.js:
https://tailwindcss.com/docs/guides/nextjs
I've create a test application with Ionic v5 w/React and I don't see any specifics in the documentation on how to configure Sass preprocessing. I have a couple sass files in the project structure, but they don't seem to be loading or being processed for that matter. I added node-sass to the package.json. Any help would be much appreciated. I used the Ionic Cli to created a blank app and added some .scss files to the project dir.
So I figured it out. Turns that ionic looks at the themes directory for all style sheets, including scss sheets. So I simply place my scss files there, ran ionic serve and imported the base style sheet, import '/theme/styles.scss' into the "main" component and it worked. I could run ionic build command see that the scss files were processed and minified into a .css file.
So just to make it clear that you do need to install node-sass via npm or yarn in order for Ionic to support scss files after that you can change any files whether it’s inside pages or components or theme folder and you just have to update the import to scss instead of css
Command for Installation
npm install --save-dev node-sass
Import changes
I am working on a project made with create-react-app. I installed rsuite with npm install rsuite.
I'm following the documentation: https://rsuitejs.com/en/guide/themes
I would like to use the dark theme in my project, but I can't find the following file:
#import '~rsuite/dist/styles/rsuite-dark.css';
The file I'm currently including is: import 'rsuite/dist/styles/rsuite.min.css';
Please fork this example, reproduce the problem you are issue.
https://codesandbox.io/s/5vq6zo2z5l
In the sandbox it seems to work fine. Actually the import they included in the sandbox doesn't work (import "rsuite/dist/styles/rsuite.min.css";) but if you replace it with import import 'rsuite/dist/styles/rsuite-dark.css'; it works.
Does anyone know what steps I have to follow in order to include the dark theme css file?
I figured this out: I just needed to update to the last version (4.0.0).
To update all packages to the last version you can use this commands:
npm i -g npm-check-updates
ncu -u
npm install
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 am learning React and I have already created a few apps with CRA.
I haven't found a good and easy way to include sass on my react projects so I came up with this:
install node-sass on the src folder
add this to the package.json:
"node:sass": "node-sass src/index.scss src/index.css -w"
then on each component, I would add a sass partial file, so I could keep the style and the js file in the same folder.
is there any problems with doing that?
I've read some tutorials to config webpack to use sass but it sounded to complicated.
Including partials per component is just fine and actually encouraged as a standard. Then you include it in the webpack with the ExtractTextPlugin, which allows you to bundle all your sass files into a single css file that you import in index.html. You can see an example here: https://github.com/ianshowell/react-serverless-kickstart/blob/master/webpack.common.js#L46
For this to work, you also need to include the sass-loader which will let your Js files parse your Sass class names. Feel free to use my starter pack that the above code is linked in to help you figure it all out.
Edit: Also, take a look at this example component to see how importing styles works: https://github.com/ianshowell/react-serverless-kickstart/tree/master/src/components/TodoItem
If you want to use sass in your react app, install chokidar
It will help you:
https://www.npmjs.com/package/react-scripts-sass-chokidar
Create react app v2, support SASS out of the box (https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)
Here a link to read the documentation: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
All you need is to install node-sass if not already
npm i node-sass --save-dev
And then make sure you import files with scss extension.
If you need to change old css files, change the extension, and so follow with the imports.