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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我找到了在使用Create React

App创建的应用程序中设置CSS模块的指南。

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

但是如何-我不明白。

回答：

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

以上是 如何在React.js应用程序中配置Stylus支持？ 的全部内容， 来源链接： utcz.com/qa/417198.html

回到顶部