Я создал библиотеку компонентов 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"
}
}
Я уже добавил sass и sass-loader в качестве зависимостей в MY-PROJECT, я не уверен, что я могу с этим сделать?
В этом случае либо вы используете расширение .css
, а вам следует использовать .scss
, либо конфигурация вашего веб-пакета неверна. Однако без репродукции трудно сказать.
Спасибо за ваш ответ. Я попытался переименовать свой main.css в main.scss и проверил, что SCSS MY-LIBRARY правильно объединен в CSS. Но все та же проблема. Попробовав несколько вещей, оказалось, что основная проблема заключается в том, что команды npm run dev
(запускаются локально) и npm run build; npm run start
(при развертывании, но я также воспроизводлю локально) не отображаются одинаково. CSS не отображается аналогичным образом. Я отредактирую свой исходный пост, чтобы добавить свой package.json
Наконец-то я понял, в чем проблема. В моей конфигурации попутного ветра мне нужно было указать, что я также хочу применить попутный ветер к компонентам, импортированным из 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: {
...
}
},
}
Вы ориентируетесь на браузеры, которые не поддерживают вложение CSS, см. поддержку браузеров. Рассматривали ли вы возможность использования препроцессора, такого как SCSS? Пока все браузеры не поддерживают это изначально, я думаю, что это лучшая альтернатива.