主页 / 问题 / 875685
Accepted
Артём Ионаш
Asked:2020-08-31 15:50:33 +0800 CST2020-08-31 15:50:33 +0800 CST

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

  • 772

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

我找到了在使用 Create React App 创建的应用程序中设置 CSS 模块的说明。我了解需要做什么npm run eject，并以某种方式重写了配置文件，但我不明白具体如何。

javascript

1 个回答

  1. Best Answer

    在你的项目中安装三个 npm 包：

    在 webpack 配置文件中，在 section 中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 组件中，如下所示：

    import style from './СomponentStyle.styl';

    并通过这样的名称在代码中使用它，例如：

    className={style.container}

    哪里container是 CSS 中的类名，只是没有点，但是对于这样的名称，例如：.container-btn-green你需要这样写：style.containerBtnGreen好吧，或者像这样style['container-btn-green']

    • 1

相关问题