在React tsx中使用customize-cra-less-loader构建顺风时出现无法识别的输入错误

Question

我正在尝试使用较少支持的顺风。 我已经将customize-cra用于webpack并使用customize-cra-less-loader在我的react应用程序中加载更少的内容。除了生成的 tailwind.output.css 之外，一切正常。它有一些带有空值的 CSS 属性。

我的 config-overrides.js 是：

const { override, addPostcssPlugins } = require("customize-cra");
const addLessLoader = require("customize-cra-less-loader");

 module.exports = override(
  addLessLoader({
  cssLoaderOptions: {
  sourceMap: true,
  modules: {
    localIdentName: "[hash:base64:8]",
  },
},
lessLoaderOptions: {
  lessOptions: {
    strictMath: true,
  },
},
}),
addPostcssPlugins([require("tailwindcss"), require("autoprefixer")])
 );

除了生成的 tailwind.output.css 之外，一切正常。 tailwind.output.css 有一些无法识别的输入错误：

   tailwind.output.css. 
--tw-blur: ;
 --tw-brightness: ;
 --tw-contrast: ;
 --tw-grayscale: ;
 --tw-hue-rotate: ;
 --tw-invert: ;
 --tw-saturate: ;
 --tw-sepia: ;
 --tw-drop-shadow: ;

正如您所看到的，所有这些 css 属性都有无法识别的空值。 运行项目时出现错误，

/src/tailwind.output.css (../../node_modules/css-loader/dist/cjs.js?? 
ruleSet[1].rules[1].oneOf[9].use[1]!../../node_modules/postcss-loader/dist/cjs.js?? 
ruleSet[1].rules[1].oneOf[9].use[2]!../../node_modules/less-loader/dist/cjs.js?? 
ruleSet[1].rules[1].oneOf[9].use[3]!./src/tailwind.output.css)
Module build failed (from ../../node_modules/less-loader/dist/cjs.js):


--tw-scale-y: 1;
--tw-pan-x:  ;
         ^
Unrecognised input
  Error in C:\Users\PCF\Documents\GitHub\Aurthur2.0\packages\web\src\tailwind.output.css 
(line 432, column 15)

我的 App.less 是：

@import "~antd/dist/antd.css";
@import "./tailwind.output.css";

.App {
 text-align: center;
}

.App-logo {
 height: 40vmin;
 pointer-events: none;
 }

 @media (prefers-reduced-motion: no-preference) {
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
 }
 }

 .App-header {
  min-height: 100vh;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font-size: calc(10px + 2vmin);
 color: white;
 }

 .App-link {
  color: #61dafb;
  }

 .Content {
  background-color: rgb(7, 155, 69);
  font-size: 12px; 
   }

   @keyframes App-logo-spin {
   from {
   transform: rotate(0deg);
   }
  to {
    transform: rotate(360deg);
   }  
   }  

Answer 1

我的经验是，可以安全地忽略这些“错误”。我有同样的问题，我的 IDE (GoLand) 抱怨，但它并没有（根据我的经验）破坏任何东西。

这是为我生成的内容：

    *, ::before, ::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}