javascript - 如何在 React.js 应用程序中配置手写笔支持？

Question

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

我找到了 a guide to setting up CSS Modules在使用 Create React App 创建的应用程序中。
我知道您需要运行 npm run eject 并以某种方式重写配置文件，
但如何——我不明白。

Answer 1

您需要在项目中安装下一个 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} 

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