我使用以下命令创建了一个空白 React 项目:npx create-react-appon npm v7.0.7 and Node.js v15.0.1
npx create-react-app
安装:
然后我尝试将一个空白的 .scss 文件导入到 App 组件中:
import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App;
它抛出一个错误:
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;博士
npm uninstall node-sass
npm install sass
或者,如果使用 Yarn
yarn remove node-sass
yarn add sass
Edit3 :是的,另一个编辑。迁移到 sass (dart-sass) 是最好的解决方案。前一个包括将 node-sass 锁定到 4.xx 版本,该版本已有 2 年历史,缺少更新的 SCSS 功能。
Edit2 :sass-loader v10.0.5修复了它。问题是您可能没有将它用作项目依赖项,而是更多地用作您的依赖项的依赖项。CRA 使用固定版本,angular-cli 锁到 node-sass v4,等等。
现在的建议是:如果您只安装 node- sass,请检查以下解决方法(和注释)。如果您正在处理一个空白项目并且您可以管理您的Webpack配置(不使用 CRA 或 CLI 来构建您的项目),请安装最新的 sass-loader。
编辑 :这个错误来自sass-loader。由于 node-sass @latest 是 v5.0.0 并且 sass-loader 需要 ^4.0.0,因此存在语义版本不匹配。
他们的存储库中有一个未解决的问题,需要审查相关的修复。在此之前,请参阅以下解决方案。
解决方法 :暂时不要安装 node-sass 5.0.0(主要版本刚刚升级)。
卸载 node-sass
然后安装最新版本(5.0之前)
npm install node-sass@4.14.1
注意:LibSass(因此也是 node-sass)已被弃用,dart-sass 是推荐的实现。您可以使用sassinstead,它是 dart-sass 的 Node.js 发行版,编译为纯 JavaScript。
sass