Nuxt "yarn dev" 设置后构建循环 "@nuxtjs/tailwindcss": "^5.0.2"

Question

当我在样式标签中使用 @apply 时：

<style lang="postcss" scoped>
input {
  @apply absolute right-0 top-0 opacity-0 z-10;
}
</style>

它生成一个loop/reload：

这些是我的依赖项：

"dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/svg": "^0.4.0",
    "@nuxtjs/tailwindcss": "^5.0.2",
    "eslint": "^8.4.1",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "postcss": "^8.4.4"
  }

这是我的 eslint 配置：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {}
}

这是我的 nuxt 配置：

 // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
    '@nuxtjs/svg'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/'
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  },

  server: {
    port: 9000, // default: 3000
    host: '0.0.0.0'
  }

他们在这个问题上讨论了问题 https://github.com/nuxt-community/tailwindcss-module/issues/359 但解决方案对我不起作用 :( 有帮助吗？

Answer 1

我从 issue 上得到的答案得到了修复 ;)

一个临时修复方法是将其添加到 nuxt.config.js

watchers: {
    webpack: {
      ignored: [
        '**/*.eslintcache',
        '**/.git/**'
      ]
    }
  },

Nuxt "yarn dev" 设置后构建循环 "@nuxtjs/tailwindcss": "^5.0.2"

Nuxt "yarn dev" build loop after setting up "@nuxtjs/tailwindcss": "^5.0.2"

webpack

nuxt.js

tailwind-css