NodeJS Tailwind css“npm run watch”不工作

vptzau2j  于 2023-06-29  发布在  Node.js
关注(0)|答案(1)|浏览(84)

我正在使用Magento 2。我们在设计中使用顺风。这里是我的顺风目录app/design/frontend/ThemeVendor/themename/web/tailwind/
在这里我有package.json它包含下面的代码

{
  "name": "some them name",
  "version": "3.0.0",
  "description": "some theme desc",
  "main": "tailwind.config.js",
  "dependencies": {
    "@some-themes/some-modules": "^1.0.4",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.7",
    "autoprefixer": "^10.4.14",
    "browser-sync": "^2.27.10",
    "postcss-import": "^14.1.0",
    "tailwindcss": "^3.2.4",
    "watch": "^1.0.2"
  },
  "devDependencies": {
    "postcss": "^8.4.24"
  },
  "scripts": {
    "build": "NODE_ENV=production npx tailwindcss --postcss -i tailwind-source.css -o ../css/styles.css --minify",
    "watch": "NODE_ENV=development npx tailwindcss --postcss -i tailwind-source.css -o ../css/styles.css  --watch --verbose",
    "build-dev": "echo DEVELOPMENT builds are NOT SUPPORTED by tailwind v3, please use the 'watch' or 'build-prod' commands instead. && exit 1",
    "build-prod": "npm run build && npm run output-success",
    "browser-sync": "browser-sync start --config ./browser-sync.config.js",
    "output-success": "echo \"\\033[0;32mDone!\\033[0m\""
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "author": "Some Themes BV",
  "license": "proprietary",
  "private": true
}

在同一个目录中，我有tailwind.config.js，其中包含以下代码

const {
  spacing
} = require('tailwindcss/defaultTheme');

const colors = require('tailwindcss/colors');

const someModules = require('@some-themes/some-modules');

module.exports = somethemeModules.mergeTailwindConfig({
  theme: {
    extend: {
      screens: {
        'sm': '640px',
        // => @media (min-width: 640px) { ... }
        'md': '768px',
        // => @media (min-width: 768px) { ... }
        'lg': '1024px',
        // => @media (min-width: 1024px) { ... }
        'xl': '1280px',
        // => @media (min-width: 1280px) { ... }
        '2xl': '1536px' // => @media (min-width: 1536px) { ... }

      },
      fontFamily: {
        sans: ["Segoe UI", "Helvetica Neue", "Arial", "sans-serif"],
        'openSans':['Open Sans'],
        'squar':['Squartiqa4F'],
        'squarLight':['Squartiqa4FLight'],
      },
      colors: {
        primary: {
          lighter: colors.blue['300'],
          "DEFAULT": colors.blue['800'],
          darker: colors.blue['900']
        },
        secondary: {
          lighter: colors.blue['100'],
          "DEFAULT": colors.blue['200'],
          darker: colors.blue['300']
        },
        background: {
          lighter: colors.blue['100'],
          "DEFAULT": colors.blue['200'],
          darker: colors.blue['300']
        },
        green: colors.emerald,
        yellow: colors.amber,
        purple: colors.violet
      },
      textColor: {
        orange: colors.orange,
        red: { ...colors.red,
          "DEFAULT": colors.red['500']
        },
        primary: {
          lighter: colors.gray['700'],
          "DEFAULT": colors.gray['800'],
          darker: colors.gray['900']
        },
        secondary: {
          lighter: colors.gray['400'],
          "DEFAULT": colors.gray['600'],
          darker: colors.gray['800']
        }
      },
      backgroundColor: {
        primary: {
          lighter: colors.blue['600'],
          "DEFAULT": colors.blue['700'],
          darker: colors.blue['800']
        },
        secondary: {
          lighter: colors.blue['100'],
          "DEFAULT": colors.blue['200'],
          darker: colors.blue['300']
        },
        container: {
          lighter: '#ffffff',
          "DEFAULT": '#fafafa',
          darker: '#f5f5f5'
        }
      },
      borderColor: {
        primary: {
          lighter: colors.blue['600'],
          "DEFAULT": colors.blue['700'],
          darker: colors.blue['800']
        },
        secondary: {
          lighter: colors.blue['100'],
          "DEFAULT": colors.blue['200'],
          darker: colors.blue['300']
        },
        container: {
          lighter: '#f5f5f5',
          "DEFAULT": '#e7e7e7',
          darker: '#b6b6b6'
        }
      },
      minWidth: {
        8: spacing["8"],
        20: spacing["20"],
        40: spacing["40"],
        48: spacing["48"]
      },
      minHeight: {
        14: spacing["14"],
        'screen-25': '25vh',
        'screen-50': '50vh',
        'screen-75': '75vh'
      },
      maxHeight: {
        '0': '0',
        'screen-25': '25vh',
        'screen-50': '50vh',
        'screen-75': '75vh'
      },
      container: {
        center: true,
        padding: '1.5rem'
      }
    }
  },
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
  // Examples for excluding patterns from purge
  content: [
    '../../**/*.phtml',
    '../../*/layout/*.xml',
    '../../../../../../../app/code/**/*.phtml',
  ]
});

在同一个目录中，我有postcss.config.js，其中包含以下代码

const { postcssImportSomethemeModules } = require("@some-themes/some-modules");

module.exports = {
    plugins: [
        postcssImportSomeModules,
        require('postcss-import'),
        require('tailwindcss/nesting'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

在同一个目录中，我有tailwind-source.css，其中包含

/* purgecss start ignore */
@import "tailwindcss/base";
@import "tailwindcss/components";

@import url(components/category-page.css);
@import url(components/product-prices.css);
@import url(components/cart.css);
@import url(components/customer.css);
@import url(components/forms.css);
@import url(components/messages.css);
@import url(components/product-list.css);
@import url(components/product-page.css);
@import url(components/wishlist.css);
@import url(components/modal.css);
@import url(components/slider.css);
@import url(components/structure.css);
@import url(components/swatches.css);
@import url(components/button.css);
@import url(components/theming.css);
@import url(components/transitions.css);
@import url(components/typography.css);
@import url(components/page-builder.css);
@import url(components/input.css);

/* purgecss end ignore */

@import "tailwindcss/utilities";
@import "theme.css";

在此目录app/design/frontend/ThemeVendor/themename/web/css/中，我有我的styles.css
现在，在终端中，如果转到..app/design/frontend/ThemeVendor/themename/web/tailwind/并运行num run build-prod，它会在styles.css中生成新的css。
但当我运行npm run watch，如果我改变了我的html，phtml文件中的任何内容，它显示Rebulding已经完成，但它所做的是它只unminify我的css/styles.css它不添加新的css，因为我改变了我的html，phtml文件
例如，如果我现在添加footer.phtml<h1 class="bg-pink-400">Test</h1>bg-pink-400是一个顺风类，但当我使用npm run watch时，它不会在我的css/styles.css中添加css，但当我运行npm run build-prod时，它会添加，并且在我重新加载页面时会显示更改
所以基本上命令npm run build-prod工作，而npm run watch不工作。
...app/design/frontend/ThemeVendor/themename/web/tailwind/目录

让我知道，如果你想知道任何其他文件的代码任何帮助或指导将是伟大的。

更新我的问题：

如果我把tailwind-source.css文件做成这样

/* purgecss start ignore */
/*@import "tailwindcss/base";
@import "tailwindcss/components";*/

/*@import url(components/category-page.css);
@import url(components/product-prices.css);
@import url(components/cart.css);
@import url(components/customer.css);
@import url(components/forms.css);
@import url(components/messages.css);
@import url(components/product-list.css);
@import url(components/product-page.css);
@import url(components/wishlist.css);
@import url(components/modal.css);
@import url(components/slider.css);
@import url(components/structure.css);
@import url(components/swatches.css);
@import url(components/button.css);
@import url(components/theming.css);
@import url(components/transitions.css);
@import url(components/typography.css);
@import url(components/page-builder.css);
@import url(components/input.css);*/

/* purgecss end ignore */

/*@import "tailwindcss/utilities";
@import "theme.css";*/
@tailwind base;
@tailwind components;
@tailwind utilities;

我已经注解了所有内容并保留在代码下面

@tailwind base;
@tailwind components;
@tailwind utilities;

这样做我的npm run watch命令的作品，它产生的css类添加在任何html，phtml文件在css/styles.css
所以现在如果有人能帮忙的话为什么？

node.js

1条答案

按热度按时间
oipij1gg

oipij1gg1#

我得到了我的解决方案，就像这个应用程序/设计/前端/主题供应商/主题名称/web/tailwind $cat /proc/sys/fs/inotify/max_user_watches输出是-29933，我们将其更改为-524288
现在npm run watch命令工作正常。我在任何phtml文件中添加类时，它也添加了css

赞(0）分享  回复(0）举报  2023-06-29
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com