有没有办法导入scss文件以使用react-create-app对组件进行反应？

Question

我正在尝试通过create-react-app在我的React项目中开始使用scss而不是css。
我正在使用本指南

现在我的package.json看起来像这样

    "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",

它从scss文件创建css文件，但是如果我要

import './App.scss';

在我的App.jsx样式将不适用。 但是如果我将其更改为import './App.css';它们将起作用import './App.css';

这应该发生吗？ 有没有办法导入CSS文件，而不是CSS？

Answer 1

如官方文档中所述，您指的是：

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

因此，无法导入scss文件，而是导入组件中的css文件。 由于进行了配置，因此您每次运行应用程序时都会根据scss文件“构建” css文件。 这确实是正常的行为。

但是，您是否要在另一个scss文件中导入scss文件：

要在Sass文件之间共享变量，可以使用Sass导入。 例如，src / App.scss和其他组件样式文件可以包含@import“ ./shared.scss”; 带有变量定义。

同样建议您从版本控制中删除.css文件：

此时，您可能需要从源代码管理中删除所有CSS文件，并将src / ** / *。css添加到您的.gitignore文件中。 通常，将构建产品保持在源代码控制之外是一个好习惯。