How to include scss compilation to css during CRA build

Question

I want to create npm package from my CRA app. Lets say I have some components where I include .scss file. When I build this app, I compile .tsx/ts components to JavaScript files with their definitions.

Compiled folder hierarchy structure may looks like this

components
=> BurgerMenu
    => BurgerMenu.d.ts
    => BurgerMenu.js
    => BurgerMenu.js.map

However compiled JavaScript files imports scss files require("./burgerMenu.scss"); instead of css file and css file is not compiled into specific folder.

Desired result is below

components
=> BurgerMenu
    => BurgerMenu.d.ts
    => BurgerMenu.js
    => BurgerMenu.js.map
    => BurgerMenu.css

How I can set sass compile during build and in every single component change import from scss to css?

Sample BurgerMenu component

import * as React from "react";
import "./burgerMenu.scss";

export const BurgerMenu = (props) => {
  //removed for brevity
};

package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": false,
  "main": "dist/js/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/js/index.d.ts",
  "publishConfig": {
    "access": "public",
    "tag": "prerelease"
    },
  },
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:lib": "yarn build:babel && yarn build:types && node ./scripts/copyTS.js",
    //TODO: node sass compile
    "build:babel": "concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"",
    "build:babel:cjs": "cross-env BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env",
    "build:babel:esm": "cross-env BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm",
    "build:babel:umd": "cross-env BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
    "build:types": "tsc -p tsconfig.gen-dts.json",
    "clean": "rimraf dist",
    "develop": "yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose",
    },  
}

score 1 · Accepted Answer · answered Jul 07 '20 at 16:43

node-sass npm package can be used to convert all the .scss files to .css files and the same can be used your modules for importing

Add this in your package.json

"scripts" : {
    ...
    "build-css": "node-sass src/scss/ -o dist"
}

Here is a nice explanation of how node-sass can be used - How to compile or convert sass / scss to css with node-sass (no Ruby)?

How to include scss compilation to css during CRA build

1 Answers1