React + TS + Sass + Material-UI

  1. Create a new Project with TypeScript:
    yarn create react-app landing --typescript
  2. Add sass support
    yarn add node-sass
    yarn add @types/node-sass
    yarn add npm-run-all --dev
  3. Edit scripts in the package.json
    "scripts": {
    "build:css":"node-sass src/styles/sass/ -o src/styles/css/",
    "watch:css":"npm run build:css && node-sass src/styles/sass/ -o src/styles/css/ --watch --recursive",
    "start:react": "react-scripts start",
    "start": "npm-run-all -p watch:css start:react",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
    },
  4. Create style files in the correct place
    cd landing
    mkdir styles/sass
    mv App.css _app.scss
    echo "@import 'app';" > styles/sass/index.scss
  5. Include Material-UI
    yarn add @material-ui/core
    yarn add typeface-roboto
    yarn add @material-ui/icons
  6. Write simple HelloWorld
    import React from "react";
    import Button from "@material-ui/core/Button";
    import "./styles/css/index.css";
    const App: React.FC = () => {
    return (
    <Button variant="contained" color="primary">
    Hello World
    </Button>
    );
    };
    export default App;
  7. Check the result