Creé un proyecto React en blanco, usando el comando: npx create-react-app en npm v7.0.7 y Node.js v15.0.1
Instalado:
Luego traté de importar un archivo .scss en blanco al componente de la aplicación:
import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App;Me arroja un error:
Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss) Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. { "name": "react-17-node-sass-5", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.5", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "node-sass": "^5.0.0", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.0", "web-vitals": "^0.2.4" }, ... } }TL;DR
npm uninstall node-sassnpm install sassO, si usa hilo
yarn remove node-sassyarn add sassEdit3 : sí, otra edición. Pasar a sass (dart-sass) es la mejor solución. El anterior incluía el bloqueo de node-sass a la versión 4.xx, que tiene 2 años y carece de funciones SCSS más nuevas.
Edit2 : sass-loader v10.0.5 lo arregla. El problema es que es posible que no lo esté utilizando como una dependencia del proyecto, sino más bien como una dependencia de sus dependencias. CRA usa una versión fija, angular-cli se bloquea en node-sass v4, etc.
La recomendación por ahora es: si está instalando solo node-sass, verifique la solución a continuación (y la nota). Si está trabajando en un proyecto en blanco y puede administrar la configuración de su paquete web (sin usar CRA o una CLI para montar su proyecto), instale el último sass-loader.
Editar : este error proviene de sass-loader . Hay un desajuste de versiones semánticas ya que node-sass @latest es v5.0.0 y sass-loader espera ^4.0.0.
Hay un problema abierto en su repositorio con una solución asociada que debe revisarse. Hasta entonces, consulte la solución a continuación.
Solución alternativa : no instale node-sass 5.0.0 todavía (la versión principal acaba de actualizarse).
Desinstalar node-sass
npm uninstall node-sass
Luego instale la última versión (antes de la 5.0)
npm install node-sass@4.14.1
Nota: LibSass (por lo tanto, node-sass también) está en desuso y dart-sass es la implementación recomendada. En su lugar, puede usar sass , que es una distribución Node.js de dart-sass compilada en JavaScript puro.
La única razón por la que obtiene un error como ese es porque su versión de Node.js no es compatible con su versión de node-sass.
Por lo tanto, asegúrese de consultar la documentación en node-sass .
O esta imagen a continuación lo ayudará a decidir qué versión de Node.js puede usar la versión de node-sass.
Por ejemplo, si está utilizando la versión 12 de Node.js en su sistema Windows ("quizás"), entonces debería instalar la versión 4.12 de node-sass .
npm install node-sass@4.12Si, como esto. Entonces ahora solo necesita instalar la versión de node-sass recomendada por el equipo de node-sass con la versión de Node.js instalada en su computadora.