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 文件。

Since src/App.js still imports src/App.css, the styles become a part of your application. You can now edit src/App.scss, and src/App.css will be regenerated.

此外，由于现在生成了 .css 个文件，您应该将它们从您的 SCM 中删除。

At this point you might want to remove all CSS files from the source control, and add src/**/*.css to your .gitignore file.

doc

Answer 2

2. version of create-react-app supports Sass now. Install node-sass (e.g. npm install node-sass) to enable it. Checkout this application's Navigation component.

sass 在 create-react-app 中不工作

sass not working in create-react-app

sass

reactjs

webpack

create-react-app

node-sass-chokidar