I tried to change the buildpath from webpack to vite:
publicPath:
process.env.NODE_ENV === “production”
? “./” // prod
: “/”, // dev
I want to show the litte site it in a subdirectory of a domain. How can I realize this with the vite.config
The equivalent Vite config option is base:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: process.env.NODE_ENV === 'production'
? './' // prod
: '/', // dev
})
GitHub demo
Related
in my Vue3 project I import the components in the router index.js like that:
{
path: settingsStore.startUri,
name: "home",
component: () => import("../views/Home/Home.vue"),
},
My vite.config looks like that:
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import vuetify from "vite-plugin-vuetify";
const path = require("path");
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
vuetify({
autoImport: true,
}),
],
define: {
"process.env": {},
__VUE_I18N_FULL_INSTALL__: true,
__VUE_I18N_LEGACY_API__: false,
__INTLIFY_PROD_DEVTOOLS__: false,
},
resolve: {
alias: {
"#": path.resolve(__dirname, "src"),
},
},
build: {
rollupOptions: {
output: {
entryFileNames: "news-[name].js",
assetFileNames: "news-[name].[ext]",
manualChunks: undefined,
chunkFileNames: "chunks/[name].js",
},
},
},
optimizeDeps: {
include: ["vue", "axios"],
},
});
When I run npm run build it creates a chunk directory with some smaller .js files beeing imported in the index.js but as relativ paths like that:
import("./chunks/Home.js")
But I need to import the files from an url like that:
import("https://example.com/chunks/Home.js")
Does anyone know if thats possible and how can I do that?
I tried a lot, read a lot of documentations but didnt find an answer
next-transpile-modules works great for Next projects, but how do I transpile modules for a raw SWC build??? I stumped 😭
Repo: https://github.com/deltaepsilon/script-kitty
I started from a Turborepo base and exported two packages, ui and command-k into a Turborepo Next app named web. Everything worked great once I added ui and command-k to the next.config.js file like so:
const withTM = require('next-transpile-modules')(['command-k', 'ui']);
module.exports = withTM({
reactStrictMode: true,
});
Now I've got a new app named external that's going to be a standalone build of the command-k package. This will get published to npm.
I'm using swc-loader to transpile it with the following config:
const path = require('path');
// See https://github.com/iykekings/react-swc-loader-template
const config = {
mode: 'development',
entry: './index.tsx',
module: {
rules: [
{
test: /\.(ts|tsx)$/,
loader: 'swc-loader',
include: [
path.resolve(__dirname),
path.resolve(__dirname, '../../packages/command-k'),
path.resolve(__dirname, '../../packages/ui'),
],
exclude: /node_modules/,
},
],
},
};
module.exports = config;
I keep getting the following error when building with yarn dev:
ERROR in ../../packages/command-k/index.tsx 2:0-50
Module not found: Error: Can't resolve './command-k' in '/kitty/packages/command-k'
resolve './command-k' in '/kitty/packages/command-k'
using description file: /kitty/packages/command-k/package.json (relative path: .)
// /packages/command-k/index.tsx
import * as React from 'react';
export { default as CommandK } from './command-k';
It looks like swc-loader is somehow unable to import from inside of a Turborepo package. It works fine if I inline the contents of ./command-k into /packages/command-k/index.tsx, but swc-loader refuses to follow the import.
I tried to drop console for my Vite2 project. I googled and found the terserOptions, however, it didn't work. So I just create a blank template from the offical site with the following code.
yarn create vite my-vue-app --template vue
And then add some console.log on Helloworld page.
the vite.config.js is below:
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
export default defineConfig({
base: "./",
plugins: [vue()],
bulid: {
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
});
After I build the project, the console.log still there. So what's the right way to drop_console on a project built by vite2?
You need to specify in build.minify to use terser.
If not set, terserOptions is ignored as it defaults to using esbuild.
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
export default defineConfig({
base: "./",
plugins: [vue()],
bulid: {
minify: 'terser', // <-- add
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
});
This setting removes console.* at build time.
If you want to use esbuild, you can use this:
esbuild: {
drop: ['console', 'debugger'],
}
I'm starting a project with Sapper (https://sapper.svelte.dev/) / Svelte (https://svelte.dev/) and my client wants to use Fomantic-UI as a CSS framework (https://fomantic-ui.com/introduction/getting-started.html).
I don't have found on the net, examples of how to do this. Would someone help me do this? Including the correctly configuration for fontawesome-free icons with fomantic-ui?
About the Fomantic-UI, i did:
npx degit "sveltejs/sapper-template#rollup" frontend
cd frontend
npm install --save-dev node-sass svelte-preprocess autoprefixer
npm i fomantic-ui-sass
After that, I changed the rollup.config.js includind this lines:
...
import sveltePreprocess from 'svelte-preprocess';
...
const preprocess = sveltePreprocess({
scss: {
includePaths: ['src']
},
postcss: {
plugins: [require('autoprefixer')]
}
});
...
export default {
client: {
...
svelte({
...,
preprocess,
...
})
...
server: {
...
svelte({
...,
emitCss: true,
preprocess,
...
})
...
I wrote a file svelte.config.js:
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
preprocess: sveltePreprocess({
scss: {
includePaths: ['src']
},
postcss: {
plugins: [require('autoprefixer')]
}
})
};
I created a directory src/stylewith one file global.css:
$theme-folder: 'default' !default;
$image-path: '#{$theme-folder}/assets/images' !default;
$font-path: '#{$theme-folder}/assets/fonts' !default;
#import '../../node_modules/fomantic-ui-sass/src/utils/all';
#import '../../node_modules/fomantic-ui-sass/src/variables'; // default theme variables
#import '../../node_modules/fomantic-ui-sass/src/semantic.scss'; // Semantic-UI SCSS
In src/routes/_layout.svelte, I called the global.scss:
<svelte:head>
<style src="../style/global.scss"></style>
</svelte:head>
And I copied the folder ./node_modules/fomantic-ui-sass/src/themes/default/assets to ./static/default/assets
And the icons is showing now correctly.
Is this the best solution?
I created a new react-ts app using yarn create #vitejs/app my-app --template react-ts.
I installed tailwind using yarn add --dev tailwindcss#latest postcss#latest autoprefixer#latest.
I initialized tailwind: npx tailwindcss init -p.
I set from and to in postcss.config.js:
module.exports = {
from: 'src/styles/App.css',
to: 'src/styles/output.css',
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
I created a App.css file in src/styles:
#tailwind base;
#tailwind components;
#tailwind utilities;
According to https://vitejs.dev/guide/features.html#postcss, any valid postcss-load-config syntax is allowed. from and to seem to be allowed.
When I call yarn dev which essentially runs vite, my app is starting without build errors but tailwind output is not generated.
What am I doing wrong?
make sure your postcss.config.js file is in your app root directory
it solved my problem
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
mode: 'jit',
purge: {
enabled: process.env.NODE_ENV === 'production',
// classes that are generated dynamically, e.g. `rounded-${size}` and must
// be kept
safeList: [],
content: [
'./index.html',
'./src/**/*.{vue,js,ts}',
// etc.
],
},
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
}
In your vite.config.js, make sure to include Tailwind in your plugins.
plugins: [react(),tailwindcss()],
Also, you can import Tailwind with the following.
import tailwindcss from 'tailwindcss';
from and to are not required.
I had to update my import statement for the css file in main.tsx to point to src/styles/App.css which will cause vite to run postcss.
Maybe you are forget to fill content object in tailwind config
module.exports = {
content: ['./src/*.{js,jsx}', './src/**/*.{js,jsx}'],
theme: {
extend: {},
},
plugins: [],
}