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

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

我也有同样的问题，我找到了这个解决方案，您可以查看下面的链接，但这里也有抄录，以供参考：

解决方案1

如何使用Stylus与Create React应用程序

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

npm install stylus -g

接下来，您需要创建新的：

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

现在，您需要安装npm运行的所有包：

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

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

创建-反应-应用-手写笔

基本安装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 2

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

希望这能帮到你！

Answer 3

1. 运行npm run eject，它将所有信任和依赖项添加到项目中。你不能还原它
2. npm i --save-dev stylus stylus-loader
3. 为添加配置到webpack (您必须更新所有配置:开发、生产)

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

developement -添加新规则

 {
    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,
        },
      }],
  },

production -样式的更新规则

{
    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`.
},