[React] setup React with Typescript and Sass(eject)

Photo by Alex Read on Unsplash

It’s easy to set up a project with React since its CLI tool create-react-app supports typescript and sass.

Typescript

create-react-app <app-name> --typescript

Simply adding typescript argument to creating app and you get .tsx files (typescript version of jsx) instead of js.

Sass

The CLI also supports sass, you just need to install node-sass

yarn add node-sass -D

Change the file extension of <App.css> to <App.sass> and format,

Boom! Finished. Now you can use typescript and sass easy on React.

..but there are other problems.

import './App.sass'; // oops!!! relative path!!!!!

In the App.tsx file, the import command comes with the relative paths. Let’s make it to absolute paths. To do that, we need to configure webpack.config files. And here comes ‘eject’.

Eject

yarn eject

When you enter the command it shows warning like this.

`Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!`

Let’s cross the bridge. Enter y for the question

NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
? Are you sure you want to eject? This action is permanent. (y/N)

After done, you will encounter the warning like this with yarn start.

./node_modules/react-dev-utils/webpackHotDevClient.js
Error: [BABEL] E:\gitRepo\test\node_modules\react-dev-utils\webpackHotDevClient.js: Cannot find module '@babel/plugin-syntax-async-generators' (While processing: "E:\\gi
tRepo\\test\\node_modules\\babel-preset-react-app\\dependencies.js")

Removing the node_mobules folder and reinstalling packages would suffice.

Path

Add asset folder aligning with public and src so the directory should be pictured like the following. Let’s hit the config/webpack.config.js

/src
/assets
   /style
      App.sass(imports App2.sass)
      /sass
         App2.sass(use background-image url img.png)
   /image
      img.png

with resolve.module

You can easily set assets as a module.
Open config/webpack.config.js, go to line 250 to ‘resolve.modules’
and add ‘assets’ after ‘node_module’ so look like

modules: [‘node_modules’, ‘assets’].concat(…
and import like you import node_modules

And import like this.

//App.tsx
import 'style/App.sass'
// App.sass
@import 'style/sass/App2.sass' or @import 'sass/App2.sass'
// App2.sass
background-image: url('../image/img.png') 
// you can make imgurl mixin with '../image' for any sass comes to App.sass

with resolve.alias

Scroll down a bit on the config/webpack.config.js find alias.
then add @assets : paths.appPath + ‘assets’

and import @assets/style/App.sass, you probably see the warning like:

Module not found: You attempted to import <name> which falls outside
of the project src/ directory. Relative imports outside of src/ are not supported.

Since create-react-app limited import outside of ‘src’, we need to un-limit it by removing the following code from plugins(webpack.config.js)

new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),

Without the code, the webpage has no error to import outside of ‘src’ by the alias. If you prefer alias on sass here’s how you do.

//App.tsx
import '@assets/style/App.sass'
// App.sass
@import '@assets/style/sass/App2.sass' or @import 'sass/App2.sass'
// App2.sass
background-image: url('../image/img.png')
  or
background-image: url('~@assets/image/img.png') 

And here’s the repository project created by create-react-app and configured with typescript and sass then added few aliases of @image and @style

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

// 29–019–04–19

made some change for the path, now ‘assets’ located under ‘src’ and added @app and @component alias for components

kellywoo/react-typescript-sass