如何在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} 

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