如何在 React.js 应用程序中配置 Stylus 支持? [英] How to configure Stylus support in a React.js application?

问题描述

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

I want the classes in my React.js application to be available for export from .styl-files in the same way as it can be done from CSS Modules, but I can't find any ready-made solution to this problem.

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

I found a guide to setting up CSS Modules in an application created with Create React App.
I understand that you need to run npm run eject and somehow rewrite configuration files,
but how – I don't understand.

推荐答案

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

You need to install next npm-packages in your project:

• 手写笔
• stylus-loader
• css-loader

在 webpack.config 中，在 module 部分你需要添加下一点:

In webpack.config, in section module you need to add next points:

{
  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 文件导入你的样式:

Then you can import your styles from .styl files in your React components like this:

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

并且您可以通过 CSS 名称使用样式，例如:

and you can use style by CSS name for example:

className={style.container} 

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

where container - it is name of CSS but without dot. For complicated names like: .container-btn-green you need write next code: style.containerBtnGreen or style['container-btn-green']

这篇关于如何在 React.js 应用程序中配置 Stylus 支持?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！