PROD и DEV CSS не отображаются одинаково с Nuxt3

Я создал библиотеку компонентов Vue3 (назовем ее MY-LIBRARY) с помощью Nuxt3, используя среди прочего tailwind v2. У меня есть сторонний проект под названием MY-SIDE-PROJECT, созданный с помощью laravel-mix (v6) и Vue3, который использует tailwind v2. У меня также есть еще один проект Vue3 (назовем его My-PROJECT), созданный с помощью Nuxt3, также с использованием tailwind v2.

В MY-PROJECT я использую компоненты из MY-LIBRARY для рендеринга страниц.

Когда я создаю MY-PROJECT в рабочей среде, используя скрипт npm run build, который запускает nuxt build, мои страницы обслуживаются, но в моей консоли появляются предупреждения, такие как:

 [WARNING] CSS nesting syntax is not supported in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14") [unsupported-css-nesting]

    <stdin>:1:62181:
      1 │ ...-cell}@media (min-width:1024px){&--bordered-max-lg,&--hidden-max...
        ╵                     

Обновлено: эта проблема решена, css MY-LIBRARY не был правильно связан.

ВСЕ ЕЩЕ, CSS неправильно интерпретируется на страницах MY-PROJECT.

Я ожидаю, что страницы MY-PROJECT будут правильно обслуживать CSS из MY-LIBRARY по мере его создания в производстве.

Я уже пытался поиграться с конфигурацией nuxt в MY-PROJECT, но комбинация Nuxt3/Vue3 вместе с tailwind v2 плохо документирована в Интернете. На данный момент я не могу перейти на tailwind3, так как у этого проекта есть некоторые требования к внешней совместимости.

Вот файл MY-PROJECT nuxt.config.js:

export default defineNuxtConfig({
    ...
    css: [
        '@/assets/styles/main.scss'
    ],
    postcss: {
        plugins: {
            tailwindcss: {},
            autoprefixer: {},
        },
    },
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {}
                }
            }
        }
    }
})

Вот файл MY-PROJECT tailwind.config.js:

module.exports = {
    important: true,
    presets: [
        require('MY-LIBRARY/tailwind.config')
    ],
    purge: {
        content: [
            "./components/**/*.{js,vue,ts}",
            "./pages/**/*.vue",
            "./nuxt.config.{js,ts}",
            "./app.vue",
        ]
    },
    theme: {
        extend: {
            ...
        }
    },
    variants: {
        ...
    }
}

Я уже пытался добавить postcss.config.js в MY-PROJECT, но это ничего не изменило.

Если у вас есть какие-либо советы о том, как я могу решить мою проблему, я был бы так благодарен! Заранее спасибо.

Обновлено: Попробовав несколько вещей, оказалось, что основная проблема заключается в том, что команды npm run dev (запускаются локально) и npm run build; npm run start (при развертывании, но я также воспроизводлю локально) не отображаются одинаково. CSS не отображается аналогичным образом. Вот пакет MY-PROJECT package.json:

{
  "name": "MY-PROJECT",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --port=3000",
    "docker": "npm run dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "start": "nuxt start"
  },
  "engines": {
    "node": "16.x",
    "npm": "8.x"
  },
  "dependencies": {
    "MY-LIBRARY": "^1.1.2",
    "@pinia/nuxt": "^0.4.7",
    "autoprefixer": "^10.4.14",
    "axios": "^1.3.4",
    "luxon": "^3.3.0",
    "nuxt": "^3.3.1",
    "nuxt-proxy": "^0.4.1",
    "pinia": "^2.0.33",
    "sass": "^1.60.0",
    "tailwindcss": "^2.2.17",
    "ufo": "^1.1.1",
    "vue-i18n": "^9.2.2",
    "vue3-lottie": "^2.5.0"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "4.2.1",
    "@types/node": "^18.14.2",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^9.9.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.21",
    "prettier": "^2.8.4",
    "sass-loader": "^13.2.2"
  },
  "overrides": {
    "vue": "latest"
  }
}

Вы ориентируетесь на браузеры, которые не поддерживают вложение CSS, см. поддержку браузеров. Рассматривали ли вы возможность использования препроцессора, такого как SCSS? Пока все браузеры не поддерживают это изначально, я думаю, что это лучшая альтернатива.

JSON Derulo 14.04.2023 16:47

Я уже добавил sass и sass-loader в качестве зависимостей в MY-PROJECT, я не уверен, что я могу с этим сделать?

Inès 17.04.2023 11:12

В этом случае либо вы используете расширение .css, а вам следует использовать .scss, либо конфигурация вашего веб-пакета неверна. Однако без репродукции трудно сказать.

JSON Derulo 17.04.2023 11:15

Спасибо за ваш ответ. Я попытался переименовать свой main.css в main.scss и проверил, что SCSS MY-LIBRARY правильно объединен в CSS. Но все та же проблема. Попробовав несколько вещей, оказалось, что основная проблема заключается в том, что команды npm run dev (запускаются локально) и npm run build; npm run start (при развертывании, но я также воспроизводлю локально) не отображаются одинаково. CSS не отображается аналогичным образом. Я отредактирую свой исходный пост, чтобы добавить свой package.json

Inès 17.04.2023 15:55
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
4
291
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Наконец-то я понял, в чем проблема. В моей конфигурации попутного ветра мне нужно было указать, что я также хочу применить попутный ветер к компонентам, импортированным из MY-LIBRARY.

Спасибо @JSONDerulo за обмен, который позволил мне точно определить происхождение.

#MY-PROJECT's tailwind.config.js

module.exports = {
    important: true,
    presets: [
        require('MY-LIBRARY/tailwind.config')
    ],
    purge: {
        content: [
            "./components/**/*.{js,vue,ts}",
            "./pages/**/*.vue",
            "./nuxt.config.{js,ts}",
            "./app.vue",
            "./node_modules/MY-LIBRARY/components/**/*.{js,vue,ts}" #<-- the important part
        ]
    },
    theme: {
        extend: {
            ...
        }
    },
}

Другие вопросы по теме