当前位置: 首页 > 知识库问答 >
问题:

在没有web包的现有React项目中难以安装SCS

邢寒
2023-03-14

我继承了一个在JS中使用CSS的React应用程序。这很麻烦,因为所有的SCSS都是作为一个字符串编写的,这使得工作非常困难,因为IDE无法完成代码提示或格式化。

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

我正在尝试切换到SCS,但不太善于管理。我正在使用以下教程,该教程声称可以在没有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 starr命令运行应用程序时,我得到以下错误:

> 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.

我不确定是否存在我没有看到的依赖项或版本问题,或者可能存在的其他问题。

我非常感谢任何人给我的建议

共有2个答案

禄和宜
2023-03-14

您的项目正在使用来自CreateReact应用程序的react脚本。CRA使用webpack,与SASS配合良好。

如果要更改默认的网页包配置,您需要弹出(不推荐)或使用react app rewired(或类似工具)之类的工具。

赵俊晤
2023-03-14

您的starr命令错误,

npm全运行-并行启动监视:sass

应该是,,

npm运行全部--并行启动监视:sass

 类似资料:
  • 我在iOS中有一个相当复杂的React原生项目,我想把它移植到Android上,测试它的可移植性。我已经完成了以下标准安装说明: '安装最新的JDK安装Android SDK:On Mac:brew安装Android SDK导出Android_HOME=/usr/local/opt/Android SDK打开Android SDK管理器(在Mac上启动新的shell并运行Android);在出现的

  • 在MACBOOK上安装PYGAME时,尽管我在MAC上安装了Xcode,但还是出现了以下错误。我试图用pip命令安装pygame。 蟒蛇版本是3.7.3 pip和蟒蛇都在同一个文件夹中 用于安装的命令是:pip install pygame 收集pygame使用缓存 https://files.pythonhosted.org/packages/0f/9c/78626be04e193c062484

  • 我正在运行到Windows路径字符限制。 例如,当我运行“gulp”的安装时,通过

  • 我将AWS amplify与auth、dynamodb和GraphQLAPI一起用于react本机应用程序。现在我需要将现有的后端添加到web应用程序。我运行下面的命令,获得带有API、auth和函数的amplify后端文件夹。缺少用于查询和转换的graphql文件夹(graphql客户端)。如何获取GraphQL客户端文件夹以从数据库中获取数据?

  • 我从Git存储库下载了一个简单的项目,并在Intellij中打开了它。几个导入语句以红色突出显示,表示“无法解析符号”无法解析的包有:zaxxer、springframework。 通常在Perl或Python中,我会启动像CPAN这样的依赖关系管理器并简单地安装它们,但我的理解是,在Java中实际上没有这样的东西,依赖关系是在某种程度上按项目来解决的。 我安装了Maven 3,我的项目有一个po

  • 我读过一些教程, https://spring.io/guides/gs/spring-boot/ https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#build-tool-plugins-gradle-plugin