什么是 react-app-rewire-postcss-cssnext
react-app-rewire-postcss-cssnext 是一个 npm 包，用于在 Create React App 项目中支持 CSSNext，CSSNext 是一种 CSS 预处理器语言，用于扩展 CSS 功能。通过使用 react-app-rewire-postcss-cssnext，您可以在 React 项目中使用 CSSNext。
安装 react-app-rewire-postcss-cssnext
在您的 React 项目中，打开终端，并执行以下命令，即可将 react-app-rewire-postcss-cssnext 安装到您的项目中。
npm install react-app-rewire-postcss-cssnext --save-dev
如何使用 react-app-rewire-postcss-cssnext
在您的 React 项目中，您需要构建一个 config-overrides.js 文件，用于覆盖默认 webpack 配置。
首先，在您的 React 项目根目录下创建 config-overrides.js。
接下来，在文件中添加以下内容：
const rewireCssnext = require("react-app-rewire-postcss-cssnext");
module.exports = function override(config, env) {
config = rewireCssnext(config, env);
return config;
};- 保存文件，并运行 npm start，您将会看到 CSSNext 已被成功加载。
react-app-rewire-postcss-cssnext 的详细使用方式
react-app-rewire-postcss-cssnext 支持所有 CSSNext 的功能，您只需要像平时一样书写 CSSNext，便可以在您的 React 项目中使用。
以下为使用示例：
-- -------------------- ---- -------
-- ------- --
------------- ---------------- ----------- -------
-------- -
---------- -----
------ ------
-
------------ -
------- -
------ ------
-
-
------ ------------------ -
-------- -
---------- -----
-
-您可以看到，这是一段典型的 CSSNext 代码，包含了 custom-media，变量，以及嵌套等特性。这段代码可以被 react-app-rewire-postcss-cssnext 自动加载，在您的 React 项目中使用。
常见问题
Q: 我安装了 react-app-rewire-postcss-cssnext，但是在 React 项目中没有找到 CSSNext。
A: 您需要确保您已经正确覆盖了默认的 webpack 配置，可以尝试重启您的项目，或者检查您的配置文件是否正确。
Q: 我想保持默认的配置，但是同时使用 CSSNext。
A: 您可以使用 react-app-rewired 包，该包可以在不覆盖默认配置的情况下使用 react-app-rewire-postcss-cssnext。
结论
使用 react-app-rewire-postcss-cssnext 极大地扩展了您的 React 项目的 CSS 功能。您可以使用 CSSNext 中的任何功能，并在 React 项目中轻松使用。在今天的教程中，我们已经学习了如何安装和使用 react-app-rewire-postcss-cssnext，包括如何覆盖默认 webpack 配置文件。
感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be981e8991b448e5a62