After I run the build script in svelte project together with tailwind after deployment it does not recognize the styling of tailwind but it shows it as plain html.
Also how can I import the folder images in index.html or should I import them one by one ?
1.This is my package.json file
{
"name": "svelte-app",
"version": "1.0.0",
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"build": "yarn run build:tailwind && rollup -c",
"start": "sirv public",
"serve": "serve public -p 80",
"dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\""
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"autoprefixer": "^10.0.4",
"axios": "^0.26.1",
"concurrently": "^5.3.0",
"cross-env": "^7.0.3",
"postcss": "^8.1.14",
"postcss-cli": "^8.3.0",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"tailwind": "^4.0.0",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"blueimp-md5": "^2.19.0",
"filepond": "^4.30.3",
"filepond-plugin-image-exif-orientation": "^1.0.11",
"filepond-plugin-image-preview": "^4.6.11",
"flowbite": "^1.4.1",
"js-md5": "^0.7.3",
"jshashes": "^1.0.8",
"md5": "^2.3.0",
"nodemon": "^2.0.15",
"page": "^1.11.6",
"password-hash": "^1.2.2",
"sirv-cli": "^1.0.0",
"svelte-filepond": "^0.2.0",
"svelte-spa-router": "^3.2.0",
"uuid": "^8.3.2"
}
}
2.Tailwind config.js file
module.exports = {
purge: ["./src/**/*.html", "./src/**/*.js"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
};
3.This is the index.html file after building.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link rel='icon' type='image/png' href='./favicon.png'>
<!-- <link rel='stylesheet' href='./global.css'> -->
<link rel='stylesheet' href='./build/bundle.css'>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./tailwind.css">
<script defer src='./bundle.js'></script>
</head>
<body>
</body>
</html>
4.This is the postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Related
I'm struggling with configuring a project set with Vite4, Vue3.
App.vue should simply import a module defined in other min.js file,
but it isn't and showing an error "{module name} is not defined".
Glad to be know if there is anything I have missed.
Thank you in advance!
package.json
{
"name": "test-project",
"version": "0.0.3",
"scripts": {
"dev": "vite --host --port 3333",
"start:dev": "vite --port 80 --mode dev",
"start:prod": "vite --host --port 80 --mode production",
"build": "vite build",
"build:dev": "vite build --mode dev",
"build:prod": "vite build --mode production",
"serve": "vite preview --open",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
"format": "prettier . --write",
"test:unit": "jest"
},
"dependencies": {
"#babel/preset-env": "^7.16.5",
"#bundled-es-modules/axios": "^0.21.1",
"#datadog/browser-rum": "^4.15.0",
"#j-t-mcc/vue3-chartjs": "^1.2.0",
"#juggle/resize-observer": "^3.3.1",
"#popperjs/core": "^2.10.2",
"#rollup/plugin-commonjs": "^24.0.0",
"#rollup/plugin-node-resolve": "^15.0.1",
"#stomp/stompjs": "^6.1.2",
"chart.js": "^3.7.0",
"crypto-js": "^4.1.1",
"element-plus": "^1.2.0-beta.6",
"esbuild": "^0.14.5",
"file-saver": "^2.0.5",
"mitt": "^3.0.0",
"moment": "^2.29.1",
"moment-timezone": "^0.5.37",
"path": "^0.12.7",
"sockjs-client": "^1.5.2",
"swiper": "^7.4.1",
"vite-plugin-html": "^3.2.0",
"vue": "^3.2.16",
"vue-chart-3": "^3.0.4",
"vue-cookie-next": "^1.3.0",
"vue-router": "^4.0.12",
"vue-universal-modal": "^1.1.3",
"vue-zoomer": "^0.4.0-beta.2",
"vue3-lottie": "^2.1.0",
"vuex": "^4.0.2",
"webstomp-client": "^1.2.6",
"yup": "^0.32.11"
},
"devDependencies": {
"#types/jest": "^27.0.3",
"#vitejs/plugin-vue": "^4.0.0",
"#vue/test-utils": "^2.0.0-rc.17",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-vue": "^8.1.1",
"jest": "^26.6.3",
"prettier": "^2.5.0",
"sass": "^1.45.1",
"ts-jest": "^26.5.6",
"vite": "^4.0.0",
"vue-jest": "^5.0.0-alpha.10"
}
}
vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import { splitVendorChunkPlugin } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [splitVendorChunkPlugin(), vue()],
})
index.html (nothing should have been changed from default settings...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import '../src/assets/js/no-working-logic.min.js'; <- this is problem
import 'element-plus/dist/index.css';
createApp(App).mount('#app')
App.vue (partial)
<script>
import {onMounted, ref} from 'vue';
export default {
setup() {
const password = ref("");
onMounted(() => {
try {
const passwordId = document.getElementById('password');
const passwordRandom = new KeypadSuit(pinRandom, {
--- some random logic here ---
// new Keypadsuit <- this Keypadsuit is defined in no-working-logic.min.js
} catch (e) {
alert(e)
}
});
return {
password
}
}
}
</script>
<template>
<el-form-item prop="password">
<el-input
id="password"
type="password"
placeholder="비밀번호"
v-model="password"
maxlength="4"
>
</el-input>
</el-form-item>
</template>
the problem is(as described on App.vue logic),
no-working-logic.min.js works well on other environments except these.
I have tried with some plugins avaliable on Vite and rollupOptions,
but it was not enough to declare and solve this error.
Should any other conditions/ additional codes be shared, please let me know! Thanks!
I'm using Nuxt 3 and tailwind to gether .
package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"#intlify/unplugin-vue-i18n": "^0.7.0",
"#intlify/vite-plugin-vue-i18n": "^6.0.3",
"#nuxtjs/tailwindcss": "^5.3.3",
"nuxt": "3.0.0-rc.10",
"sass": "^1.55.0",
"sass-loader": "10.1.1",
"tailwindcss-flip": "^1.0.0",
"vue-i18n": "^9.2.2"
},
"dependencies": {
"#heroicons/vue": "^2.0.11",
"#kyvg/vue3-notification": "^2.4.1",
"#nuxt-hero-icons/outline": "^1.0.1",
"#nuxt-hero-icons/solid": "^1.0.1",
"#pinia/nuxt": "^0.4.2",
"#vueform/multiselect": "^2.5.2",
"axios": "^0.27.2",
"daisyui": "^2.28.0",
"jenesius-vue-modal": "^1.7.2",
"sweetalert2": "^11.4.33",
"vee-validate": "^4.6.7",
"vue-recaptcha-v3": "^2.0.1",
"vue3-loading-overlay": "^0.0.0",
"yup": "^0.32.11"
}
}
the problem is that every time that I format the code,
formatter puts some space in tailwind classed and this cause error
[between md: and flex ]
<style lang="scss">
.navbar {
#apply md: flex ;
}
<style>
What should I do ?
nuxt.config.ts
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nVitePlugin from '#intlify/unplugin-vue-i18n/vite'
import path from 'path'
export default defineNuxtConfig({
modules: [
'#pinia/nuxt','#nuxtjs/tailwindcss' ,'#nuxt-hero-icons/outline/nuxt','#nuxt-hero-icons/solid/nuxt'
],
runtimeConfig: {
public: {
captchaKey: 'a',
apiUrl:'z'
}
},
vite: {
plugins: [
VueI18nVitePlugin({
include: [
resolve(dirname(fileURLToPath(import.meta.url)), './locales/*.ts'),
path.resolve(__dirname, './components/*.*'),
path.resolve(__dirname, './pages/*.*'),
]
})
]
},
css:[
'~/assets/base.css'
]
})
I followed the Tailwind UI getting started documentation, but for some reason it looks nothing like it's supposed to in my Next.js project.
Here is my tailwind.config.ts:
export const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require("#tailwindcss/forms")],
};
Here's my package.json:
{
"name": "nextjs-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#headlessui/react": "^1.5.0",
"#heroicons/react": "^1.0.6",
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"tailwindcss": "^3.0.23"
},
"devDependencies": {
"#types/node": "17.0.21",
"#types/react": "17.0.40",
"eslint": "8.11.0",
"eslint-config-next": "12.1.0",
"typescript": "4.6.2"
}
}
Here's my _document.tsx:
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Here is what the Signin component looks like:
Here's what it should look like:
Add your extra file paths (such as 'components' and 'sections') to tailwind.config.js:
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// ADD extra paths here...
],
theme: {
extend: {},
},
plugins: [],
}
As shown here - https://tailwindcss.com/docs/guides/nextjs
I created a fresh Vue 3 app with vue-cli with Babel, ESlint, Prettier and no CSS pre-formatter. I try to load a .css file from the style tag of a component, but when I open it in the browser devtools I see an HTML document with the "please enable Javascript" error message.
Am I doing something wrong in my imports? The same import code worked fine with Vue 2.
Note that the CSS code works when I write it directly in the style tag rather than importing a separate file. It also works when I import it globally in the main.js of the Vue app. It just doesn't work when importing a separate file as exampled below.
Thank you for your help.
The App.vue from which I try to load a CSS file:
<template>
<div class="container-fluid">
<div class="row" id="__main-row" v-if="auth">
<main class="col-md-9 ml-sm-auto col-lg-10 px-4">
<router-view />
</main>
</div>
<div id="__main-row" v-else>
<main>
<router-view />
</main>
</div>
</div>
</template>
<script>
export default {
computed: {
auth() {
return this.$store.state.auth.user;
}
},
watch: {
$route() {
this.$store.commit('alert/reset');
}
}
};
</script>
<style>
#import '/assets/css/main.css';
</style>
The CSS file when I open it in devtools:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" />
<title>vue-front</title>
<link href="/js/about.js" rel="prefetch"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong
>We're sorry but vue-front doesn't
work properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
package.json:
{
"name": "vue-front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"dev": "npm run serve & (cd api && npm run dev)"
},
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuelidate": "^0.7.6",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#popperjs/core": "^2.9.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0",
"jquery": "^3.6.0",
"prettier": "^1.19.1"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"prettier": {
"tabWidth": 4,
"singleQuote": true,
"arrowParens": "always"
},
"babel": {
"presets": [
"#vue/cli-plugin-babel/preset"
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Hello guys can anybody help with Nextjs v10 build ? it builds without styles :|
here is my package.json and next.config.js
I import all styles in _app.js, it also comes in chrome network -> preview without styles
On vercel everything is ok, but when i try to build on my computer, it's without styles :|
**
next.config.js
**
module.exports = {
images: {
domains: ['localhost','assets.vercel.com','via.placeholder.com','mine-front-new.vercel.app'],
},
}
package.json
{
"name": "mine",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"start": "next start",
"prod:build": "SET NODE_ENV=production && next build && next export",
"export": "next build && next export"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#fortawesome/fontawesome-free": "^5.13.1",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.57",
"add": "^2.0.6",
"axios": "^0.19.2",
"chart.js": "^2.9.3",
"date-fns": "^2.16.1",
"draft-js": "^0.11.7",
"es6-shim": "^0.35.6",
"js-cookie": "^2.2.1",
"jwt-decode": "^3.0.0",
"moment": "^2.27.0",
"next": "10.0.0",
"react": "17.0.1",
"react-chartjs-2": "^2.9.0",
"react-dom": "17.0.1",
"react-facebook": "^8.1.4",
"react-lottie": "^1.2.3",
"react-transition-group": "^4.4.1",
"yarn": "^1.22.10"
},
"devDependencies": {
"#types/cookie": "^0.4.0",
"clsx": "^1.1.1",
"cookie": "^0.4.1",
"prop-types": "^15.7.2",
"react-date-range": "^1.0.3",
"react-reveal": "^1.2.2",
"react-slick": "^0.26.1",
"react-toastify": "^6.0.8",
"slick-carousel": "^1.8.1",
"sweetalert2": "^9.15.2"
}
}
Make sure u use appropriate css loaders. I faced the same issue and resolved using this,
loaders: ['style-loader', 'css-loader', 'less-loader']
My next.config.js
module.exports = withImages({
target: 'serverless',
webpack: function (config, { webpack }) {
config.module.rules.push({
test: /\.(eot|svg|gif|md)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
})
return config
},
})