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
},
})
Related
I'm using nuxt 3 and i18n v.9.
I wanna to use new feature in i18n v.9 that allows you to make a block next to
script and template block and put translates there .
like this :
<template>
{{ $t('hi') }}
</template>
<i18n>
{
"en": {
"hi": "hello world!"
},
"ja": {
"hi": "こんにちは、世界！"
}
}
</i18n>
and this is nuxt.config.ts
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: [
path.resolve(__dirname, './components/*.*'),
path.resolve(__dirname, './pages/*.*'),
]
})
]
}
})
and this is the 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 translates doesn't come. How can I fix this?
I am trying to use Grunt PostCSS Autoprefixer but it keeps saying that it is not a PostCSS plugin:
package.json
{
"name": "test",
"version": "0.2.0",
"description": "test",
"keywords": [
""
],
"author": "",
"license": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"cssmin": "^0.4.3",
"cssnano": "^5.0.6",
"grunt": "^1.4.1",
"grunt-babel": "^8.0.0",
"grunt-contrib-cssmin": "^4.0.0",
"grunt-contrib-uglify": "^5.0.1",
"grunt-contrib-watch": "^1.1.0"
},
"devDependencies": {
"#babel/core": "^7.14.5",
"#babel/preset-env": "^7.14.5",
"autoprefixer": "^10.2.6",
"grunt-postcss": "^0.9.0",
"grunt-postcss-import": "0.0.1",
"grunt-prettify": "^0.4.0",
"postcss": "^8.3.2"
}
}
Gruntfile.js
postcss: {
options: {
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
// require('pixrem')(),
require('autoprefixer')(),
//require('cssnano')()
]
},
dist: {
src: 'dist/css/bundle.css'
}
},
I made sure to first remove the grunt-autoprefixer and install autoprefixer which should be a postcss plugin.
It turns out it was just a version compatibility issue. I simply changed:
"autoprefixer": "^10.2.6",
with:
"autoprefixer": "^9.7.4",
I am trying to use css modules with typescript and create-react-app react app.
I did import './App.modules.css'; in my App.tsx but I get the error:
Module not found: Can't resolve './App.modules.css' in 'C:\...\testapp\src'
however, it works with const styles = require('./App.module.css');
then I apparently have to use classes (classNames) for my Styles...
If I only use normal tagnames e.g h1{ background-color: green; }
those tag styles are not scoped and are overridden by later styles...
are scoped css modules only limited to css classes and not to any other things like e.g tags, attributes etc. or is there a workaround? and why do I have to require them and cannot import them?
Typescript also sometimes complains that no types for .modules.css have been found..?
{
"name": "testapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.23",
"#types/node": "^15.0.3",
"#types/react-dom": "^17.0.5",
"bootstrap": "^4.6.0",
"css-modules-typescript-loader": "^4.0.1",
"react": "^17.0.2",
"react-bootstrap": "^1.6.0",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-scripts": "4.0.3",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.3",
"serve": "^11.3.2",
"typescript": "^4.2.4",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"serve": "serve -s build",
"db": "json-server --watch db.json"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/react": "^17.0.6",
"json-server": "^0.16.3"
}
}
Change your filename to lowercase.
import './app.modules.css'
My CSS code that I imported into my Vue project and runs in the "npm run serve" section does not work on my server after "npm run build". What could be the reason for this? When I open the index file in the dist file on the local computer, it says CSS is missing, it does not say any error on the server.
main.js
import Vue from 'vue'
import App from './App.vue'
import VRouter from './router'
import VStore from './configurations/storeConfiguration'
import V18n from './configurations/languageConfiguration'
// Special CSS Library ( UA )
import "./assets/scss/ua.css";
The CSS file that appears appears in the development environment. However, it does not appear in the server environment.
package.json
{
"name": "driver",
"version": "0.1.0",
"private": true,
"sideEffects": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#fortawesome/vue-fontawesome": "^2.0.0",
"axios": "^0.20.0",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.17.3",
"core-js": "^3.6.5",
"epic-spinners": "^1.1.0",
"node-sass": "^4.14.1",
"sass": "^1.27.0",
"sass-loader": "^10.0.3",
"scriptjs": "^2.5.9",
"sweet-modal-vue": "^2.0.0",
"v-mask": "^2.2.3",
"vue": "^2.6.12",
"vue-analytics": "^5.22.1",
"vue-ctk-date-time-picker": "^2.5.0",
"vue-i18n": "^8.22.0",
"vue-input-mask": "0.0.11",
"vue-router": "^3.4.7",
"vue-suggestion": "^1.1.0",
"vue-sweetalert2": "^4.0.0",
"vue-the-mask": "^0.11.1",
"vue-toastification": "^1.7.8",
"vuex": "^3.5.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
First things first:
npm run serve does not serve the content of your dist file
Check: How to run production site after build vue cli
Would you mind show some code so we can analyse your problem?
I am trying to deploy a site built with next js ( and with tailwindcss) to vercel.But I keep getting this '' Invalid PostCSS Plugin" error".
Error shown in the vercel log
Works completely fine locally.
I'm trying to deploy the site by importing from github.
My postcss.config.js
module.exports = {
plugins: ['postcss-import', 'tailwindcss', 'autoprefixer']
}
My package.json
{
"name": "community-site",
"version": "1.0.0",
"description": "website for Education and Sports Club",
"main": "index.js",
"dependencies": {
"autoprefixer": "^9.8.4",
"axios": "^0.19.2",
"cosmicjs": "^3.2.48",
"express": "^4.17.1",
"lodash": "^4.17.19",
"moment": "^2.27.0",
"next": "^9.4.4",
"npm-run-all": "^4.1.5",
"postcss-cli": "^7.1.1",
"postcss-import": "^12.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-toastify": "^6.0.8",
"tailwindcss": "^1.4.6"
},
"devDependencies": {
"nodemon": "^2.0.4"
},
"scripts": {
"build:tailwind": "postcss styles/tailwind.css -o styles/tailwind.generated.css",
"watch:tailwind": "postcss -w styles/tailwind.css -o styles/tailwind.generated.css",
"start": "run-p watch:tailwind start:next",
"start:next": "next start",
"dev": "next",
"prebuild": "npm run build:tailwind",
"build": "next build"
},
"author": "Salvator",
"license": "ISC"
}