Create React App Scss. Create React App . Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. Creating an App. To create a new app, run: create-react-app my-app cd my-app It will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies: create-react-app (CRA) is great for getting started super-fast. It has just about everything you need for building all but the most demanding apps. It is, however, opinionated in how things get set up, and I’ve been chafing at the limitations for a while. You can’t alter the tsconfig.json except in some non-important ways. It uses webpack underneath, and that is unchangeable.
FYI in the latest version of create-react-app (since react-scripts@2.0.0) all you need to do is install node-sass and import a file with the extension .scss or .sass. In order to add Sass to a Create React App application, we need a single command: # using npm npm install node-sass --save # using yarn yarn add node-sass Renaming .css to .scss. Once you have that, we can rename our App.css to App.scss. Import the .scss File. In our App.js file, we can import the Sass file using the .scss extension. import.
Thanks Allan. Make sure to import App.scss as well into index.scss. Placing the general style files (containing vars) at the top and component partials below it. Here's an example. It's a project of mine where I import several vars and component styles into an app. GitHub repo – Roy Scheffers Aug 12 '18 at 12:40
create-react-app (CRA) is great for getting started super-fast. It has just about everything you need for building all but the most demanding apps. It is, however, opinionated in how things get set up, and I’ve been chafing at the limitations for a while. You can’t alter the tsconfig.json except in some non-important ways. It uses webpack underneath, and that is unchangeable. So let's setup a workflow here that satisfies the following statements: a) I would like to use create-react-app because I have no desire to micromanage webpack OR boilerplates.. b) I would like to use SASS/SCSS and also have it easily convert to CSS Modules if create-react-app ever includes them with scss support. Also I'm not interested in punishing myself with vanilla css. Note: We don’t currently have an index.css file, we’ll get to that in a moment. Let’s update the index.scss file. By default it has a small block of body styling. I prefer to move that into the App.scss file, but you could create a Body.scss file and move it there if you’d rather. These are the default styles that ship with CRA, and you’ll likely overwrite them later anyways. It is working fine, npm start watch your .scss files and output .css files as expected. Make sure to require the .css files in your components.. Since src/App.js still imports src/App.css, the styles become a part of your application.You can now edit src/App.scss, and src/App.css will be regenerated.. Also since .css files are now generated, you should remove them from your SCM.
