自定义Preset包

文件路径

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

项目package.json

{
  "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

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

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

generator.js

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

require('./overrides.sass')

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

module.exports = {preset}

preset/variables.scss

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

$info: green;

preset/overrides.sass

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