替换node-sass-chokidar为sass后样式表导入失败问题求助

1. 修正SCSS导入语句 #

打开src/styles/App.scss，把第2行的导入语句改成：

@import 'bootstrap/scss/functions';

你已经在sass命令里把node_modules加入了查找路径，写node_modules/前缀会让Sass去当前文件目录（src/styles/）下找不存在的node_modules文件夹，这才是报错的核心原因。

2. 优化Sass脚本命令 #

原来的命令范围太宽泛，容易处理无关文件，同时简化参数配置，修改package.json里的scripts：

"scripts": {
    "build-css": "sass --load-path=node_modules --load-path=src src/styles/:src/styles/",
    "watch-css": "npm run build-css && sass --load-path=node_modules --load-path=src src/styles/:src/styles/ --watch",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "react-scripts build --stats",
    "analyze": "webpack-bundle-analyzer build/bundle-stats.json",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

参数说明：

• --load-path=node_modules：让Sass直接从项目根目录的node_modules里查找第三方包
• --load-path=src：方便你导入src目录下的其他本地SCSS文件（比如@import 'styles/fonts'）
• src/styles/:src/styles/：只编译src/styles下的SCSS文件，输出到同目录生成对应CSS文件

3. 验证修复 #

1. 删除node_modules和package-lock.json，重新执行npm install
2. 运行npm start，即可正常编译SCSS并启动项目

内容的提问来源于stack exchange，提问作者Canovice