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

- Mo.

---

Create-react-app默认使用PostCSS，因为它是一种更现代/模块化的方法。如果您需要使用Sass，则需要在webpack.config中更新所需环境的CSS加载器。请在问题中发布您的webpack配置。 - Vlatko Vlahek

你可以在这里找到解决问题的步骤：https://dev59.com/v1kS5IYBdhLWcg3wAiR8#40487714 - Vlatko Vlahek

你执行过 npm run watch-css 命令了吗？ - illiteratewriter

@Muhammed 如果你正在使用 npm start，它应该可以工作。你能否在运行命令时从终端中发布日志？也许是一些愚蠢的问题，比如在 scss 文件中缺少分号或类似的问题。 - Vlatko Vlahek

@VlatkoVlahek 正是如此，正如您在存储库中所看到的那样，它只是遵循文档 https://github.com/athimannil/create-app - Mo.

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

文档

- Gabriel Bleu

Answer 2

create-react-app 2.0版本现在支持Sass。安装node-sass（例如npm install node-sass）以启用它。查看此应用程序的导航组件。

- Robin Wieruch