问题:如何在 React.js 应用程序中配置 Stylus 支持?

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

我发现是在使用 Create React App 创建的应用程序中设置 CSS 模块的指南。

我了解您需要运行npm run eject并以某种方式重写配置文件,

但如何——我不明白。

解答

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

• 手写笔

• 手写笔加载器

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