我继承了一个在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.
我不确定是否存在我没有看到的依赖项或版本问题,或者可能存在的其他问题。
我非常感谢任何人给我的建议
您的starr
命令错误,
npm全运行-并行启动监视:sass
应该是,,
npm运行全部--并行启动监视:sass
您的项目正在使用来自CreateReact应用程序的react脚本
。CRA使用webpack,与SASS配合良好。
如果要更改默认的网页包配置,您需要弹出(不推荐)或使用react app rewired(或类似工具)之类的工具。