# 自定义Preset包

文件路径

```javascript
package.json
index.js
generator.js
preset
    index.js
    overrides.sass
    variables.scss
```

项目package.json

```javascript
{
  "name": "vue-cli-plugin-vuetify-preset-custom",
  "version": "1.0.0",
  "description": "Custom vuetify preset",
  "author": "Toobe Loong",
  "license": "MIT",
  "main": "index.js",
  "scripts": {
    "lint": "eslint --ext .js,.vue ."
  },
  "dependencies": {
    "@vuetify/cli-plugin-utils": "^0.0.7"
  }
}

```

index.js

```javascript
// Imports
const { VuetifyPresetService } = require('@scope/cli-plugin-utils')

module.exports = api => VuetifyPresetService(api, {scope: '@scope', name: 'custom'})

```

generator.js

```javascript
const scope = '@scope'

const {
  injectGoogleFontLink,
  VuetifyPresetGenerator,
} = require('@scope/cli-plugin-utils')

module.exports = api => {
  VuetifyPresetGenerator(api, { scope, name:'custom' }, () => {
    injectGoogleFontLink(api, [
      'Open+Sans:wght@300;400;600;700;800',
      'Roboto:wght@300;400;500;700;900'
    ])
  })
}

```

preset/index.js

```javascript
require('./overrides.sass')

const preset = {
    // 按照vuetify的参数配置与实际需要自定义预设参数
}

module.exports = {preset}
```

preset/variables.scss

```javascript
@import "~vuetify/src/styles/tools/_functions.sass";
@import "~vuetify/src/styles/styles.sass";

$info: green;
```

preset/overrides.sass

```javascript
// 按照需要覆写组件样式
.v-breadcrumbs
  .v-breadcrumbs__divider ~ li
    text-transform: capitalize
  
  li:last-child
    text-transform: none

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://toobe.gitbook.io/exp/vuetify-shi-yong-ri-ji/untitled.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.