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

运行npm run eject，它将所有配置和依赖项添加到项目。您无法还原
npm i --save-dev stylus stylus-loader
将配置添加到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 3

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

运行class AwesomeClass: LessAwesomeClass { ... } extension AwesomeClass: GreatDelegate { func niceDelegateFunc() { } }，它会显示'react-scripts'中的所有配置并添加依赖项（您无法还原）
重新安装npm模块yarn eject（由于错误https://github.com/facebook/create-react-app/issues/6099导致）
安装'stylus'和'stylus-loader'软件包rm -rf node_modules && yarn install
打开yarn add stylus stylus-loader

a。查找SASS加载程序块：

config/webpack.config.js

b。在其后添加：

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

反应组件库 - 让手写笔工作

3 个答案: