您需要在您的项目中安装下一个npm-packages：

• stylus
• stylus-loader
• css-loader

在webpack.config的module部分中，您需要添加以下几点：

{
  test: /\.styl$/,
  use: [
    'style-loader',
    'css-loader?modules&camelCase&localIdentName=[path]__[name]__[local]--[hash:base64:5]',
    'stylus-loader',
  ],
},
{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
  ],
},

然后，您可以从React组件中的.styl文件导入样式，如下所示：

import style from './СomponentStyle.styl';

您可以使用CSS名称的样式，例如：

className={style.container}

其中container-它是CSS的名称，但没有点。对于复杂的名称，如：.container-btn-green您需要编写下一个代码：style.containerBtnGreen或style['container-btn-green']

运行时解决方案（无弹出）

安装react-rewired和customize-cra，以便在运行时更新配置

npm i react-app-rewired
npm i customize-cra

在 package.json 文件夹中创建文件 config-overrides.js，内容为：

const {
    override,
    addWebpackModuleRule
  } = require("customize-cra");

module.exports = override(
    addWebpackModuleRule({
      test: /\.styl$/,
      exclude: /(node_modules)/,
      loaders: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {url: false}
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [require('autoprefixer')()]
          }
        },
        'stylus-loader'
      ]
    }),
    addWebpackModuleRule({
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
      ]
    })
);

安装手写笔

npm i stylus
npm i stylus-loader
npm i css-loader

更改启动/构建脚本以使用react-rewired

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
...

然后，您可以从React组件中的.styl文件导入样式

require('./style/index.styl');

或

import style from './СomponentStyle.styl'; --> className={style.container}

这一切：）额外感谢 * 丹尼斯Bubnov* 在当前的主题-你帮了我很多实现当前的解决方案！

以下链接可用于使用create react应用程序配置手写笔
https://github.com/flexzuu/create-react-app-styl

我喜欢Surya的方法。
1.安装手写笔

npm install stylus --save-dev

1.创建2个文件夹/src/styl和/src/css
1.将一些文件放入/src/styl。
1.将以下脚本添加到package.json：

"stylus:watch": "stylus -I ./node_modules -w ./src/styl -o ./src/css",
    "stylus": "stylus -I ./node_modules ./src/styl -o ./src/css"

1.在第二个终端运行npm run stylus:watch，它会监视/src/styl中的所有文件，并将它们编译成/src/css中的css，然后由React开发服务器接收。
1.在构建react应用程序之前，请确保最后一次运行npm run stylus。