首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >自动生成的css文件变量为空

自动生成的css文件变量为空
EN

Stack Overflow用户
提问于 2022-08-03 17:33:39
回答 1查看 202关注 0票数 0

我使用的是顺风和postcss配置,它生成一个CSS文件,在生产中只使用应用程序所需的CSS类。但是,当CSS文件生成时,我注意到许多空CSS变量,在我看来,这些变量并没有起到任何作用,而且我的IDE正在将它们识别为一个错误。其中一个类的示例如下:

代码语言:javascript
运行
复制
    *, ::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:  ;
}

如果没有必要,我怎样才能摆脱这些类呢?最重要的是,我如何阻止Tailwind自动生成这些类?我做错了什么吗?

这是我的tailwind.config.js:

代码语言:javascript
运行
复制
module.exports = {
  content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    colors: {
      "primary-darker": "#45622E",
      "primary-dark": "#5A7B31",
      "primary-med": "#76A340",
      primary: "#96BA57",
      "primary-light": "#F3F9EC",
      white: "#FFFFFF",
      "secondary-dark": "#202020",
      secondary: "#262626",
      "secondary-light": "#373737",
      "active-gray": "#999999",
      "inactive-grey": "#D8D8D8",
      "background-grey": "#F8F8F8",
      "background-light": "#F2F2F2",
      success: "#83C117",
      alert: "#B63A2F",
      current: "currentColor",
    },
    extend: {
      fontFamily: {
        konnect: "Konnect, Helvetica, Arial, sans-serif",
        "konnect-medium": "Konnect Medium, Helvetica, Arial, sans-serif",
        "konnect-semibold": "Konnect SemiBold, Helvetica, Arial, sans-serif",
        "konnect-light": "Konnect Light, Helvetica, Arial, sans-serif",
      },
    },
  },
  plugins: [],
};

这是我用来用顺风自动生成文件的命令:

代码语言:javascript
运行
复制
"tailwinds:build": "npx tailwindcss -i src/assets/sass/tailwind.scss -o ./public/output.css --watch"
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-03 22:15:36

顺风使用这些变量中的空字符串作为占位符。根据他们的说法,这是一个特征,而不是一个bug。因为它们稍后会使用这些变量,如果它们是未定义的,则会遇到错误。

关于Github的相关问题:https://github.com/tailwindlabs/tailwindcss/issues/7121

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73225541

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档