如何在React.js应用程序中配置Stylus支持？

Question

我希望我的React.js应用程序中的类可以从.styl-files中导出，就像从CSS模块中导出时一样，但是我找不到任何现成的解决方案来解决这个问题。

我找到了在使用Create React
App创建的应用程序中设置CSS模块的指南。
我了解您需要运行npm run eject并以某种方式重写配置文件，
但是如何-我不明白。

Answer 1

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

• 手写笔
• 测针器
• CSS加载器

在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']