docs: add line highlighting for resolve paths instructions (#331)

This commit is contained in:
Jared Jolton 2024-02-11 12:34:37 -07:00 committed by GitHub
parent 08d6ea6a53
commit 41660d36cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -24,7 +24,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
<TabsMarkdown> <TabsMarkdown>
<TabMarkdown title="vite.config.ts"> <TabMarkdown title="vite.config">
Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L78) dependency so you don't have to install it again in your package.json Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L78) dependency so you don't have to install it again in your package.json
@ -34,7 +34,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
#### `vite.config` #### `vite.config`
```typescript {5,6,10-14} ```typescript {5,6,9-13}
import path from "path" import path from "path"
import { defineConfig } from "vite" import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue" import vue from "@vitejs/plugin-vue"
@ -43,13 +43,17 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
import autoprefixer from "autoprefixer" import autoprefixer from "autoprefixer"
export default defineConfig({ export default defineConfig({
plugins: [vue()],
css: { css: {
postcss: { postcss: {
plugins: [tailwind(), autoprefixer()], plugins: [tailwind(), autoprefixer()],
}, },
}, },
resolve: {...} plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
}) })
``` ```
@ -81,10 +85,16 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error
```typescript ```json {4-7}
"baseUrl": ".", {
"paths": { "compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"] "@/*": ["./src/*"]
}
// ...
}
} }
``` ```
@ -97,12 +107,17 @@ Add the code below to the vite.config.ts so your app can resolve paths without e
npm i -D @types/node npm i -D @types/node
``` ```
```typescript ```typescript {12-16}
import path from "path" import path from "path"
import vue from "@vitejs/plugin-vue" import vue from "@vitejs/plugin-vue"
import { defineConfig } from "vite" import { defineConfig } from "vite"
export default defineConfig({ export default defineConfig({
css: {
postcss: {
plugins: [tailwind(), autoprefixer()],
},
},
plugins: [vue()], plugins: [vue()],
resolve: { resolve: {
alias: { alias: {