Sass (Syntactically Awesome Style Sheets) is the most mature, stable, and powerful professional grade CSS extension language.
How to reproduce it
Create a React TypeScript project
npx create-react-app myReactProject --template typescriptInstall Sass
npm i sassRename all *.css files to *.scss and update imports in App.tsx and index.tsx files.
Run the project
npm startThe latest Sass version causes the following error.
Cannot read properties of undefined (reading 'pop')
WARNING in ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/App.scss)
Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
webpack or the upstream loader did not supply a source-map
ERROR in ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/App.scss)
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot read properties of undefined (reading 'pop')Solution #1
It seems that it is a dependency bug. When you install Sass as a dependency of the React project, don’t rename *.css files to *.scss. The Sass installation works with *.css files without renaming but some features may not be supported. I found that Sass comment // doesn’t work or multiple selectors for one rule won’t work. This is a temporary solution if you cannot use solution #2.
Solution #2
Update Node.js to the latest version.
