分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何使用 CRACO Webpack 配置使用 Tailwind CSS 构建 React Styleguidist？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何使用 CRACO Webpack 配置使用 Tailwind CSS 构建 React Styleguidist？？

开发过程中遇到如何使用 CRACO Webpack 配置使用 Tailwind CSS 构建 React Styleguidist？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何使用 CRACO Webpack 配置使用 Tailwind CSS 构建 React Styleguidist？的解决方法建议，希望对你解决如何使用 CRACO Webpack 配置使用 Tailwind CSS 构建 React Styleguidist？有所启发或帮助；

[已解决]

问题

按照他们的 documentation 中的规定，将 Tailwind CSS 与 CRA (create-react-app) 一起使用需要将 react-scripts 替换为 craco。

现在，我正在尝试使用 React Styleguidist 构建一个组件库。通过在 styleguidist server 中指定在 craco 的 API 中使用 craco webpack 配置文件，我能够让 Tailwind CSS 在运行 styleguIDe.config.Js 时在 localhost 中正确显示

/* styleguIDe.config.Js */
const path = require('path')

const { createWebpackDevConfig } = require("@craco/craco");

const cracoConfig = require("./craco.config.Js");
const webpackConfig = createWebpackDevConfig(cracoConfig);

module.exports = {
  webpackConfig,require: [
    path.join(__dirname,'./src/styles/tailwind.CSS')
  ]
}

但是，当我尝试使用 styleguidist build 构建生产 HTML 时，它会引发这些错误

 Building style guIDe...
 FAIL  Failed to compile

./src/components/atoms/button/index.Js
Error: [BABEL] /Users/vivz753/react-components/src/components/atoms/button/index.Js: React refresh Babel transform should only be enabled in development environment. Instead,the environment is: "production". If you want to overrIDe this check,pass {skipEnvcheck: truE} as plugin options. (While processing: "/Users/vivz753/react-components/node_modules/react-refresh/babel.Js")
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at cachedFunction.next (<anonymous>)
    at loadpluginDescriptor.next (<anonymous>)
 @ ./node_modules/react-styleguidist/lib/clIEnt/index.Js (./node_modules/react-styleguidist/lib/loaders/styleguIDe-loader.Js!./node_modules/react-styleguidist/lib/clIEnt/index.Js) 35:30-132
 @ ./node_modules/react-styleguidist/lib/clIEnt/index.Js
 @ multi ./src/styles/tailwind.CSS ./node_modules/react-styleguidist/lib/clIEnt/index
./src/components/molecules/HelloWorld/HelloWorld.Js
Error: [BABEL] /Users/vivz753/react-components/src/components/molecules/HelloWorld/HelloWorld.Js: React refresh Babel transform should only be enabled in development environment. Instead,pass {skipEnvcheck: truE} as plugin options. (While processing: "/Users/vivz753/react-components/node_modules/react-refresh/babel.Js")
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at cachedFunction.next (<anonymous>)
    at loadpluginDescriptor.next (<anonymous>)
 @ ./node_modules/react-styleguidist/lib/clIEnt/index.Js (./node_modules/react-styleguidist/lib/loaders/styleguIDe-loader.Js!./node_modules/react-styleguidist/lib/clIEnt/index.Js) 44:30-145
 @ ./node_modules/react-styleguidist/lib/clIEnt/index.Js
 @ multi ./src/styles/tailwind.CSS ./node_modules/react-styleguidist/lib/clIEnt/index
./src/components/molecules/PlayListGeneratorbutton/PlayListGeneratorbutton.Js
Error: [BABEL] /Users/vivz753/react-components/src/components/molecules/PlayListGeneratorbutton/PlayListGeneratorbutton.Js: React refresh Babel transform should only be enabled in development environment. Instead,pass {skipEnvcheck: truE} as plugin options. (While processing: "/Users/vivz753/react-components/node_modules/react-refresh/babel.Js")
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at cachedFunction.next (<anonymous>)
    at loadpluginDescriptor.next (<anonymous>)
 @ ./node_modules/react-styleguidist/lib/clIEnt/index.Js (./node_modules/react-styleguidist/lib/loaders/styleguIDe-loader.Js!./node_modules/react-styleguidist/lib/clIEnt/index.Js) 53:30-171
 @ ./node_modules/react-styleguidist/lib/clIEnt/index.Js
 @ multi ./src/styles/tailwind.CSS ./node_modules/react-styleguidist/lib/clIEnt/index
npm ERR! code 1
npm ERR! path /Users/vivz753/react-components
npm ERR! command Failed
npm ERR! command sh -c styleguidist "build"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/vivz753/.npm/_logs/2021-03-15T05_03_20_188Z-deBUG.log

通过像这样使用 react-scripts 中的配置运行命令，我能够无错误地构建 npx styleguidist build --config ./node_modules/react-scripts/config/webpack.config.Js

我在此处成功将其部署到 Vercel https://react-components-fho7l1ov3-discover-pom.vercel.app/ 但是我的样式都没有正确显示并且没有应用 tailwindCSS

我尝试查看 ./node_modules/@craco/craco/lib/features/webpack/babel.Js 中的文件，但我不明白问题可能出在哪里...

InsIDe ./node_modules/react-refresh/cJs/react-refresh-babel 显示了抛出的错误，但老实说我不知道它为什么会抱怨

if (process.env.NODE_ENV !== "production") {
  (function() {
'use Strict';

function ReactFreshBabelPlugin (babel) {
  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

  if (typeof babel.getEnv === 'function') {
    // Only available in Babel 7.
    var env = babel.getEnv();

    if (env !== 'development' && !opts.skipEnvcheck) {
      throw new Error('React refresh Babel transform should only be enabled in development environment. ' + 'Instead,the environment is: "' + env + '". If you want to overrIDe this check,pass {skipEnvcheck: truE} as plugin options.');
    }
  }
...

解决方案

我想通了。发布以防其他人遇到此问题。我不得不像这样使用 craco 的 webpack 配置的 prod 版本

/* styleguIDe.config.Js */
const path = require('path')

const { createWebpackDevConfig,createWebpackProdConfig } = require("@craco/craco");

const cracoConfig = require("./craco.config.Js");
const webpackConfig = process.env.NODE_ENV === 'production' ? createWebpackProdConfig(cracoConfig) : createWebpackDevConfig(cracoConfig);

module.exports = {
  webpackConfig,'./src/styles/tailwind.CSS')
  ]
}

styleguidist build 现在完美运行。