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

Question

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

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

Answer 1

这里是 link 使用 create react app 配置手写笔

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

Answer 2

您需要在项目中安装下一个 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']

Answer 3

运行-时间解决（不弹出）

安装 react-rewired 和 customize-cra 以选择在运行-time

更新配置

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 - 你帮助我实现了当前的解决方案！

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

How to configure Stylus support in a React.js application?

javascript

stylus

reactjs

webpack

create-react-app