努力在没有 web-pack 的现有 React 项目中安装 SCSS

Posted

技术标签:

【中文标题】努力在没有 web-pack 的现有 React 项目中安装 SCSS【英文标题】:Struggling to install SCSS in an existing React project without web-pack 【发布时间】:2021-10-20 19:47:46 【问题描述】:

我继承了一个在 JS 中使用 CSS 的 React 应用程序。这很麻烦,因为所有的 SCSS 都是以字符串形式编写的,因此很难使用,因为无法通过 IDE 进行代码提示或格式化。

我习惯于使用 web-pack 处理这类事情,但我认为它不是解决方案的一部分,因为我在 package.json 文件中找不到对它的引用。

我正在尝试切换到 SCSS,但不是很管理。我正在使用以下声称可以在没有 web-pack 的情况下工作的教程:

https://medium.com/programming-sage/react-and-sass-setup-no-webpack-no-bs-a813ac56a9b7

这是我的 package.json 的副本:


  "name": "accelerator",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/lodash": "^4.14.171",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "antd": "^4.16.3",
    "apexcharts": "^3.24.0",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "date-fns": "^2.21.3",
    "emailjs-com": "^2.6.4",
    "file-saver": "^2.0.5",
    "jquery": "^3.5.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "react": "^17.0.1",
    "react-apexcharts": "^1.3.7",
    "react-auth-guard": "^0.2.0",
    "react-bootstrap": "^1.4.3",
    "react-dom": "^17.0.1",
    "react-dynamic-checkbox-tree": "^1.0.4",
    "react-icons": "^4.1.0",
    "react-jwt": "^1.1.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-switch": "^6.0.0",
    "react-toastify": "^7.0.4",
    "read-excel-file": "^5.0.0",
    "styled-components": "^5.2.1",
    "typescript": "^4.1.3",
    "web-vitals": "^0.2.4"
  ,
  "scripts": 
    "start": "react-scripts start --no-lint",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "watch:sass": "node-sass src/App.scss src/App.css -w",
    "startr": "npm-run-all — parallel start watch:sass"
  ,
  "eslintConfig": 
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  ,
  "devDependencies": 
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "@typescript-eslint/parser": "^4.29.0",
    "autoprefixer": "^10.3.1",
    "concat": "^1.0.3",
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.24.0",
    "gh-pages": "^3.2.1",
    "node-sass": "^6.0.1",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^8.3.1"
  

当我使用 npm startr 命令运行应用程序时,我收到以下错误:

> accelerator@0.1.0 startr D:\Projects\iLab\Code\Product_dashboard_Web\accelerator
> npm-run-all — parallel start watch:sass

ERROR: Task not found: "—", parallel"
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! accelerator@0.1.0 startr: `npm-run-all — parallel start watch:sass`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the accelerator@0.1.0 startr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我不确定是否存在一些我没有看到的依赖项或版本问题,或者还有什么问题。

如果有人对我提出任何建议,我将不胜感激

【问题讨论】:

【参考方案1】:

您的startr 命令错误,

npm-run-all — parallel start watch:sass

应该是,

npm-run-all --parallel start watch:sass

【讨论】:

【参考方案2】:

您的项目正在使用来自create-react-app 的react-scripts。 CRA 使用 webpack 并且与 SASS 配合得很好。

如果你想更改默认的 webpack 配置,你需要eject(不推荐)或使用react-app-rewired(或类似工具)之类的东西。

【讨论】:

感谢您的回复!如果我理解您的建议,这会将 web-pack 合并到应用程序中吗?我目前不打算这样做,因为我的客户不想做出如此重大的改变。有没有办法在不这样做的情况下实现 SCSS? 我的建议是查看 CRA 文档,因为它已经适用于 SASS,我认为您不需要调整 webpack 配置。 根据您的建议,我已经成功地实现了 SCSS 而无需做太多事情。我发现这篇文章解决了我原来的问题***.com/questions/64625050/… 很高兴您找到了解决问题的方法。 :)

以上是关于努力在没有 web-pack 的现有 React 项目中安装 SCSS的主要内容,如果未能解决你的问题,请参考以下文章

如何将参数从 Web-pack 传递到代码?

使用 vue-cli 3.X 创建基于 web-pack 简单模板的 vue 应用

如何在 Webpacker 中使用 Rails Url 助手/Rails 5.1 中的 React-rails

src/polyfills.ts(73,1) 中出现错误时的 web-pack 错误:错误 TS2304:找不到名称“全局”。 [ng] src/polyfills.ts(73,17):

react / redux / sagas - 如何基于现有商店数据链接动作?

在现有项目 React-Native 中添加现有的原生项目 Android