Question

我刚刚按照上面的说明使用npm将scss文件转换为css文件 link to instructions它第一次工作正常并且scss文件使用自动生成的css文件编译但现在当我对scss文件进行更改时，我没有看到css文件自行更改我必须每次使用 npm run watch-css ，然后运行服务器。有没有办法做到这一点，我不必一次又一次地运行服务器？

我正在添加package.json文件。

{
  "name": "mydecisionapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "css": "^2.2.1",
    "loader": "^2.1.1",
    "node-sass-chokidar": "0.0.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-modal": "^3.1.11",
    "react-scripts": "1.1.0",
    "style": "^0.0.3",
    "validator": "8.0.0"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "css-loader": "^0.28.9",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0"
  }
}

Answer 1

如果您继续关注“添加CSS预处理器”部分，您在发布的说明中将找到答案。

安装 npm-run-all 并按如下所示修改脚本部分

"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"

这只是并行运行两个脚本，这意味着 npm start 现在将处理scss文件的监视，并运行服务器

在scss文件中进行更改后，css文件未显示更改

1 个答案: