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.
Related
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 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.
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.
How do I add support for .scss file in my create-react-app application?
The current method, described in the documentation, creates a .css files and I have to import that to make it work. What I require is to import .scss directly into the components.
There are several guides on doing this using webpack config files. But I don't have a config folder in my create-react-app or any webpack-config.dev.js.
Is there a simpler way to do so?
You can run eject to have your webpack.config.
Try this link.
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.)