Sass在create-react-app中不起作用

Question

Sass不會在create-react-app中進行編譯。 當前的package.json結構為

{
  "name": "create-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4"
  },
  "dependencies": {
    "node-sass-chokidar": "^1.2.2",
    "npm-run-all": "^4.1.2",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.1.4",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.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-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"
  }
}

回購： https : //github.com/athimannil/create-app

Answer 1

它工作正常， npm start監視您的.scss文件並按預期輸出.css文件。

確保在組件中需要.css文件。

由於src/App.js仍導入src/App.css ，因此樣式成為您應用程序的一部分。 現在，您可以編輯src/App.scss ，並且src/App.css將重新生成。

同樣，由於現在已經生成.css文件，因此您應該將它們從SCM中刪除。

此時，您可能需要從源代碼管理中刪除所有CSS文件，並將src/**/*.css .gitignore添加到您的.gitignore文件中。

DOC

Answer 2

2.版本的create-react-app現在支持Sass。 安裝node-sass（例如npm install node-sass）以啟用它。 檢出此應用程序的導航組件 。