如何在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.

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

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

，但是如何–我不明白。

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

• stylus
• 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',
  ],
},

然后，您可以从.styl文件中导入样式React这样的组件：

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} 

其中的 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屋！