Create React App中Sass无法编译问题求助

Hey there, let’s get your Sass up and running in your Create React App project smoothly. First, I spotted a critical problem in your package.json that’s almost certainly causing compilation failures—you have two duplicate dependencies keys, which is invalid JSON. Let’s fix that first, then set up the Sass workflow properly.

Step 1: Fix Your package.json Structure #

Replace your current duplicate dependencies sections with a single, valid one. Here’s the corrected version (I’ve included all your listed packages):

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

Step 2: Clean and Reinstall Dependencies #

Since we fixed the JSON structure, let’s ensure all dependencies are installed correctly:

• Delete your node_modules folder and package-lock.json file.
• Run npm install in your project root to reinstall everything fresh.

Step 3: Update Your Sass Files #

• Rename your existing .css files to .scss (for example, App.css → App.scss).
• Update the imports in your React components to point to the .scss files. For example:

  import './App.scss';
  

Step 4: Test the Setup #

Run npm start to launch your development server. The watch-css script will automatically compile your .scss files to .css in the src folder, and any changes to your Sass files will trigger a hot reload just like regular CSS.

When you’re ready to build for production, npm run build will first compile all your Sass to CSS before creating the optimized production bundle.

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