> For the complete documentation index, see [llms.txt](https://toobe.gitbook.io/exp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://toobe.gitbook.io/exp/vuetify-shi-yong-ri-ji/untitled.md).

# 自定义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

```