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

【问题标题】：How to configure Stylus support in a React.js application?如何在 React.js 应用程序中配置 Stylus 支持？
【发布时间】：2018-08-31 08:32:41
【问题描述】：

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

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

【问题讨论】：

你试过npmjs.com/package/css-modules-stylus 吗？（看看Babel Plugin部分）

标签： javascript reactjs webpack create-react-app stylus

【解决方案1】：

您需要在项目中安装下一个 npm-packages：

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

【讨论】：

【解决方案2】：

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

安装 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');

或

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

这一切 :) 还要感谢当前主题中的 Denis Bubnov - 你在实施当前解决方案方面帮助了我很多！

【讨论】：

嗨康斯坦丁，我尝试使用您的方法，但是一旦我尝试导入 .styl 文件，我就会收到以下错误：``` ./src/app.styl (./node_modules/css -loader/dist/cjs.js??ref--5-oneOf-1-1!./node_modules/postcss-loader/src??postcss!./node_modules/stylus-loader/dist/cjs.js!./ src/app.styl) TypeError: this.getOptions is not a function ``` ...一些谷歌搜索表明这可能是由 CRA 使用的 webpack 版本引起的。你以前遇到过这个错误吗？
好的，我想我解决了：github.com/webpack-contrib/stylus-loader/releases/tag/v5.0.0 -> 降级到 stylus-loader@v4.3.3 后，它按预期工作。
将尝试使用stylus-loader并更新解决方案....

【解决方案3】：

这里是使用 create react app 配置手写笔的链接

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

【讨论】：