Question

我正在尝试使用create-react-app在我的React项目中开始使用scss而不是css。
我正在使用此guide

现在我的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';

，它们将起作用

这应该发生吗？有没有办法导入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文件中。一般将构建产品保留在源代码之外的良好做法控制。

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

1 个答案: