小编典典

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

reactjs

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

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


阅读 532

收藏
2020-07-22

共1个答案

小编典典

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

在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.containerBtnGreenstyle['container-btn-green']

2020-07-22