0

我正在尝试使用支持较少的顺风。我在 webpack 中使用了 customize-cra，并在我的 react 应用程序中使用了 customize-cra-less-loader 来减少加载。除了生成的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);
   }  
   }
4

0 回答 0