在使用自定义-cra-较少加载程序构建顺风时未识别的输入错误

Question

我试着用较少支持的顺风。我已经使用自定义-cra webpack和定制-cra-较少-加载在我的反应应用程序。除了生成的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:  ;
}