Question

CSS块刚刚开源，我想将它合并到我的React应用程序中，同时仍然使用样板CRA webpack，因为我想保留所有其他功能。

根据我的理解，大多数配置只是添加另一个带有css-block插件的babel-loader。

所以不仅仅是：

{
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {

              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
          },

你跟着它：

{
        test: /\.[j|t]s(x?)$/,
        exclude: /node_modules/,
        use: [

          {
            loader: require.resolve('babel-loader'),
            options: {
              presets: [require.resolve("babel-preset-react-app")],
              cacheDirectory: true,
              compact: true,
            }
          },

          // Run the css-blocks plugin in its own dedicated loader because the react-app preset
          // steps on our transforms' feet. This way, we are guaranteed a clean pass before any
          // other transforms are done.
          {
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [
                require("@css-blocks/jsx/dist/src/transformer/babel").makePlugin({ rewriter: CssBlockRewriter }),
              ],
              cacheDirectory: true,
              compact: true,
              parserOpts: {
                plugins: [
                  "jsx",
                  "doExpressions",
                  "objectRestSpread",
                  "decorators",
                  "classProperties",
                ]
              }
            }
          },

但是，我不能为我的生活得到第二点解析任何东西。它甚至不存在，我的CSS模块只是在类中被引用。结果最终如下：

<div class="/src/test.css">

而不是

<div class="a b cD">

如果有人有任何指示，我应该试着看，我会非常感激！

P.S。作为参考，我将包含指向以下文档的链接，因为它是非常新的

http://css-blocks.com/

https://github.com/linkedin/css-blocks/blob/master/packages/%40css-blocks/website/config/webpack.config.dev.js

Answer 1

我从Linkedin示例/website获取示例，并且与react-create-app scripts一起使用。

由我CSS Blocks从ralfting/boilerplate-css-blocks中提取的样板...也许这会对您有所帮助。

如何配置Create React App以使用CSS Blocks？

1 个答案: