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

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

如果有人对我应该尝试查看的地方有任何指示，我将不胜感激！

附：作为参考，我将包含指向下面文档的链接，因为它是非常新的

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 Blocksralfting/boilerplate-css-blocks 提取的休闲样板...也许这对你有帮助。