Question

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

我在使用Create React App创建的应用程序中发现了a guide to setting up CSS Modules。
我了解您需要运行npm run eject并以某种方式重写配置文件，
但是如何-我不明白。

Answer 1

您需要在项目中安装下一个npm软件包：

在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']

Answer 2

这里是使用create react应用配置触笔的链接

https://github.com/flexzuu/create-react-app-styl

Answer 3

运行时解决方案（不弹出）

安装react-rewired和customize-cra可以选择在运行时更新配置

npm i react-app-rewired
npm i customize-cra

在 package.json 文件夹中创建内容为

config-overrides.js 的文件：

const {
    override,
    addWebpackModuleRule
  } = require("customize-cra");

module.exports = override(
    addWebpackModuleRule({
      test: /\.styl$/,
      exclude: /(node_modules)/,
      loaders: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {url: false}
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [require('autoprefixer')()]
          }
        },
        'stylus-loader'
      ]
    }),
    addWebpackModuleRule({
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
      ]
    })
);

安装手写笔

npm i stylus
npm i stylus-loader
npm i css-loader

更改您的开始/构建脚本以使用react-rewired

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
...

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

require('./style/index.styl');

OR

import style from './СomponentStyle.styl'; --> className={style.container}

这全部:)还要感谢当前主题中的 Denis Bubnov -您在实施当前解决方案方面为我提供了很多帮助！

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

3 个答案: