sass 在 create-react-app 中不起作用答案

【问题标题】：sass not working in create-react-appsass 在 create-react-app 中不起作用
【发布时间】：2018-09-16 12:01:34
【问题描述】：

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

【问题讨论】：

Create-react-app 默认使用 PostCSS，因为它是一种更现代/模块化的方法。如果你需要使用 Sass，你需要为你想要使用的环境更新 webpack.config 中的 CSS 加载器。请发布带有问题的 webpack 配置。
您可以在这里找到解决问题的步骤的答案：stackoverflow.com/questions/40486756/…
@Vlatko Vlahek 我只是按照 create-react-app 文档github.com/athimannil/…
你完成npm run watch-css了吗？
@Muhammed 如果您使用的是 npm start，它应该可以工作。运行命令时可以从终端发布日志吗？也许它有些愚蠢，比如失踪；在 scss 文件或类似文件中。

标签： reactjs webpack sass create-react-app node-sass-chokidar

【解决方案1】：

它工作正常，npm start 监视您的 .scss 文件并按预期输出 .css 文件。

确保在您的组件中需要 .css 文件。

由于src/App.js 仍然导入src/App.css，样式成为您应用程序的一部分。您现在可以编辑src/App.scss，src/App.css 将重新生成。

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

此时您可能希望从源代码管理中删除所有 CSS 文件，并将 src/**/*.css 添加到您的 .gitignore 文件中。

doc

【讨论】：

【解决方案2】：

2. version of create-react-app 现在支持 Sass。安装 node-sass（例如 npm install node-sass）以启用它。看看这个application's Navigation component。

【讨论】：