Блог

Главная - Вопросы по программированию - Tailwind 3 в Laravel выдает: Ошибка: плагин PostCSS tailwindcss требует PostCSS 8

Tailwind 3 в Laravel выдает: Ошибка: плагин PostCSS tailwindcss требует PostCSS 8

#laravel #tailwind-css

#laravel #tailwind-css

Вопрос:

Я пытаюсь обновить tailwind до версии 3 в моем приложении Laravel.

Я выполнил установку, как указано в

https://tailwindcss.com/docs/upgrade-guide#upgrade-packages

установка npm -D tailwindcss @latest postcss@latest autoprefixer@latest

Это сработало нормально. Но когда я запускаю npm run dev , я получаю эту ошибку:

ОШИБКА в сборке модуля ./resources/assets/css/tailwindcore.css (из ./node_modules/css-loader/index.js ): ошибка построения модуля: ошибка сборки модуля (из ./node_modules/postcss-loader/src/index.js ): Ошибка: плагин PostCSS tailwindcss требует PostCSS 8.

Я прочитал из документов, что PostCSS 8 теперь требуется для tailwind 3. Однако PostCSS 8 был установлен. Почему я все еще получаю эту ошибку? Я также попытался удалить папку node_modules и переустановить, но получил ту же ошибку.

Это мой package.json:

 {
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --open --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.0",
        "axios": "^0.19",
        "babel-plugin-component": "^1.1.1",
        "bootstrap": "^4.5.2",
        "cross-env": "^7.0",
        "deepmerge": "^4.2.2",
        "fibers": "^4.0.2",
        "jquery": "^3.5.1",
        "laravel-mix": "^4.1.4",
        "laravel-mix-purgecss": "^5.0.0-rc.1",
        "lodash": "^4.17.20",
        "popper.js": "^1.12",
        "postcss": "^8.4.4",
        "purify-css": "^1.2.5",
        "purifycss-webpack": "^0.7.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.27.0",
        "sass-loader": "^7.3.1",
        "tailwindcss": "^3.0.0",
        "vue": "^2.6.12",
        "vue-template-compiler": "^2.6.12",
        "vuetifyjs-mix-extension": "0.0.2"
    },
    "dependencies": {
        "@tailwindcss/forms": "^0.3.3",
        "axiom": "^0.1.6",
        "buefy": "^0.9.7",
        "element-ui": "^2.13.1",
        "modal-video": "^2.4.2",
        "prod": "^1.0.1",
        "trumbowyg": "^2.21.0",
        "vue-multiselect": "^2.1.6",
        "vue-scrollto": "^2.19.1",
        "vue-select": "^3.11.2",
        "vue-trumbowyg": "^3.6.2",
        "vuetify": "^2.3.13",
        "vuetify-loader": "^1.6.0"
    }
}

мой webpack.mix.js настройка:

 .postCss("resources/assets/css/tailwindcore.css", "public/css", [
   require("tailwindcss"),
])

мой tailwind.config.js:

 const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial-at-r': 'radial-gradient(ellipse at right, var(--tw-gradient-stops))',
      },
      colors: {
        lightblue: {
          DEFAULT: '#08c'
        },
        cyan: colors.cyan,
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms'),],
}

Ответ №1:

Проблема в том, что вы используете старую версию Laravel Mix. Еще одна проблема, с которой вы столкнетесь @tailwindcss/form , — это необходимость обновления плагина.

Обновите пакеты с помощью:

 npm install laravel-mix@latest @tailwindcss/forms@latest

Затем вам нужно будет обновить scripts в вашей package.json для новой версии Laravel Mix:

 "scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},

Комментарии:

1. Спасибо. Чтобы установить последнюю версию laravel-mix и forms, мне сначала пришлось удалить tailwind таким npm uninstall tailwindcss postcss autoprefixer образом и удалить tailwind-form. Теперь установка сработала. Теперь мне нужно исправить 21 ошибку компиляции. Я постараюсь их устранить и дам вам знать, сработало ли это.

2. Я получаю «Ошибка типа: не удается прочитать свойство «разрешить» неопределенного». Есть идеи?

3. @S.Farooq Вероятно, это проблема с вашей версией node / npm. Вероятно, вам потребуется его обновить. При этом это выходит за рамки исходного вопроса, поэтому, если у вас все еще возникают проблемы, я рекомендую открыть новый вопрос.

Метки: