您如何配置 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 模块只是在 class 中被引用。结果最终是这样的：

<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 by me ralfting/boilerplate-css-blocks 中提取的 Fallow 样板...也许这对您有帮助。

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

How do you configure Create React App to use CSS Blocks?

css

jsx

reactjs

webpack

create-react-app