React 组件库 - 让手写笔工作

Question

我正在使用这个库https://github.com/facebook/create-react-app

我正在尝试使用手写笔

到目前为止我所做的是

npm install --save-dev stylus

和

npm install --save-dev stylus-loader

然后添加到package.json，

"build-css": "stylus src/ -o src/",
"watch-css": "npm run build-css && stylus src/ -o src/ --watch --recursive",

如图书馆文档所述

这个库中没有明确的webpack文件

Answer 1

为了使用 create react app 获取 webpack 文件，您需要弹出该应用程序。 (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject)但请注意，一旦弹出，您将无法恢复该应用程序。

希望对您有所帮助！

Answer 2

我遇到了同样的问题，我找到了这个解决方案，您可以在下面的 link 中查看，但也转录在这里以供参考：

解决方案 1

How to use Stylus with Create React App

首先，如果您还没有安装 Stylus，则需要安装：

npm install stylus -g

接下来，您需要创建新的 React 应用程序：

create-react-app my_app
cd my_app
mkdir src/static/stylus

现在你需要安装 npm-运行-all 包：

npm install --save-dev npm-run-all

对于最后一步，您必须从 package.json 中删除构建和启动脚本，并将它们替换为以下内容：

"build-css": "stylus -c src/static/stylus/ --out src/static/css",
"watch-css": "npm run build-css && stylus -c -w src/static/stylus/ --out src/static/css",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js"

现在您可以运行您的应用正常使用

npm start

并在每次重新加载应用时编译所有手写笔脚本。

解决方案 2

我没试过这个，但也许它也值得一试：

create-react-app-stylus

基本安装npm模块：

npm install create-react-app-stylus --save-dev

然后替换 package.json 中的启动和构建脚本。

"scripts": {
  "start": "react-scripts-with-stylus start path/to/main.styl",
  "build": "react-scripts-with-stylus build path/to/main.styl",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},

结论：

我让它工作得很好，现在我只是想找到一种方法让它在每个组件的文件夹中工作。

Answer 3

运行 npm run eject，它将所有配置和依赖项添加到项目。你不能恢复它
npm i --save-dev stylus stylus-loader
为 stylus 添加配置到 webpack（你必须更新所有配置：开发、生产）

webpack.config -> 模块 -> 规则 -> oneOf

开发 - 添加新规则

 {
    test: /\.styl$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
        },
      }, {
        // postcss-loader и autoprefixer are already in create-react-app
        loader: 'postcss-loader',
        options: {
          plugins: () => [
            autoprefixer({ browsers: ['>= 10%', 'last 2 versions'] })
          ],
          sourceMap: true,
        },
      }, {
        loader: 'stylus-loader',
        options: {
          sourceMap: true,
        },
      }],
  },

生产 - 样式更新规则

{
    test: /\.(styl|css)$/,
    loader: ExtractTextPlugin.extract(
      Object.assign(
        {
          fallback: {
            loader: require.resolve('style-loader'),
            options: {
              hmr: false,
            },
          },
          use: [
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: shouldUseSourceMap,
              },
            },
            {
              loader: require.resolve('postcss-loader'),
              options: {
                // Necessary for external CSS imports to work
                // https://github.com/facebookincubator/create-react-app/issues/2677
                ident: 'postcss',
                plugins: () => [
                  require('postcss-flexbugs-fixes'),
                  autoprefixer({
                    browsers: [
                      '>1%',
                      'last 4 versions',
                      'Firefox ESR',
                      'not ie < 9', // React doesn't support IE8 anyway
                    ],
                    flexbox: 'no-2009',
                  }),
                  cssMQPacker(),
                ],
              },
            },
            {
              loader: require.resolve('stylus-loader')
            }
          ],
        },
        extractTextPluginOptions
      )
    ),
    // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},

Answer 4

截至 2019 年 10 月，我发现以前的答案已过时。请按照我的说明获取最新的 'create-react-app' 版本。

运行 yarn eject 显示来自 'react-scripts' 的所有配置并添加依赖项（您无法还原它）
重新安装 npm 模块 rm -rf node_modules && yarn install（错误的原因 https://github.com/facebook/create-react-app/issues/6099）
安装 'stylus' 和 'stylus-loader' 包 yarn add stylus stylus-loader
打开config/webpack.config.js

一个。查找 SASS 加载程序块：

            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'sass-loader'
              )
            },

b。在它之后添加：

            // Adds support for Stylus (using .styl extension).
            {
              test: /\.styl$/,
              exclude: /\.module\.styl$/,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap
                },
                'stylus-loader'
              ),
              sideEffects: true
            },
            // Adds support for CSS Modules, but using Stylus
            // using the extension .module.styl
            {
              test: /\.module\.styl$/,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'stylus-loader'
              )
            },

React 组件库 - 让手写笔工作

React component library - getting stylus to work

stylus

reactjs