React组件库 - 使手写笔正常工作

Question

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

我正在尝试获得手写笔工作

到目前为止我所做的是

npm install --save-dev stylus

和

npm install --save-dev stylus-loader

然后添加到包装中。JSON，

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

如图书馆的文档中所述

此库中没有明确的webpack文件

Answer 1

我也有相同的问题，我找到了该解决方案，您可以检查下面的链接，但也在此处转录以供参考：

解决方案1

如何将手写笔与Create React App

使用

首先，如果还没有，则需要安装手写笔：

npm install stylus -g

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

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

现在您需要安装NPM-Run-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

然后替换您的开始并在软件包中构建脚本。

"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 2

为了为您提供使用Create App的WebPack文件，您需要弹出应用程序。(https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/template/readme.md#npm-run-eject(，但请注意一旦射出app back。

希望这对您有所帮助！

Answer 3

1. 运行npm run eject，将所有配置和依赖项添加到项目。你不能还原
2. npm i --save-dev stylus stylus-loader
3. 将配置添加到 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"版本。

1. 运行 yarn eject

2. 重新安装NPM模块rm -rf node_modules && yarn install(Bug https://github.com/facebook/facebook/create-react-app/issues/6099(

3. 安装'mylus'和'stylus-loader'软件包 yarn add stylus stylus-loader

4. 打开config/webpack.config.js

   a。查找Sass Loader块：

            {
              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'
              )
            },