如何使用Craco编译React JS代码？

Question

我使用npm create-react-app命令创建了一个React JS应用程序。在这个项目中，我想使用Tailwind CSS，所以我安装并使用了Tailwind Setup Documentation中显示的Craco。

但从那以后，我的js代码根本不能编译。

我想知道如何解决这个问题，并为我的js代码关联一个编译器到Craco，比如babel。

以下是我在package.json中设置的脚本：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

这是我的craco.config.js文件：

module.exports = {
style: {
  postcss: {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
    ],
  },
},
}

Answer 1

试试这个

module.exports = {
  style: {
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    },
  },
  webpack: {
    configure: {
      module: {
        rules: [
          {
            type: 'javascript/auto',
            test: /\.woff2$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: 'fonts/',
                },
              },
            ],
          },
        ],
      },
    },
  },
};