Skip to content

v1.0.0

Compare
Choose a tag to compare
@johnleider johnleider released this 07 Oct 14:23
· 393 commits to dev since this release

This release brings in some quality of life changes/fixes and reduces the amount of actions a user has to take in order to enable certain features in Vuetify.

  • sass variables are automatically hoisted for src/sass/variables.s(a|c)ss
    • if you already have a src/sass/main.s(a|c)ss file, just rename to variables
  • on creation of new projects, will automatically update vue.config.js to transpile vuetify
  • will now lint after creation
  • will no longer attempt to compile styles when NODE_ENV=testing

If you are installing Vuetify in a new project, simply create a variables.s(a|c)ss file in src/sass.

🔧 Bug fixes

  • fix(service): apply default objects to package.json dep/devDep properties (80f727b)
  • fix: remove sass processing in testing env (9169fac)

🚀 Features

  • feat: add Lithuanian locale (de34cca)
  • feat: add Czech locale (60bc318)
  • feat: add Swedish locale (6e4d1b8)
  • feat(LICENSE.md): add license file (4e84c85)

📑 Upgrade guide

vue.config.js

If you have previous configurations in your vue.config that resemble anything below, you can safely remove them.

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss"`,
      },
      scss: {
        data: `@import "~@/sass/main.scss";`,
      },
    },
  },
  chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('scss').oneOf(match).use('sass-loader')
        .tap(opt => Object.assign(opt, { data: `@import '~@/sass/main.scss';` }))
    })
  }
}

In the past this was a manual step that the user had to take. It is now handled automatically.

main.sass

This was also a manual step on the Vuetify documentation that is now automated. Any non component variable imports such as ~vuetify/src/styles/styles.sass can be removed. This is now pre-loaded before all user variables and automatically available in src/sass/variables.s(a|c)ss.

v0.6.2

// src/sass/main.scss

$border-radius-root: 6px;
$font-size-root: 14px;

@import '~vuetify/src/styles/styles.sass';
@import '~vuetify/src/components/VBtn/_variables.scss';

$fab-icon-sizes: map-deep-set($fab-icon-sizes, 'small', 20);
$headings: map-deep-set($headings, 'h1 size', 3rem);

v1.0.0

// src/sass/variables.scss

@import '~vuetify/src/components/VBtn/_variables.scss';

$border-radius-root: 6px;
$font-size-root: 14px;
$fab-icon-sizes: map-deep-set($fab-icon-sizes, 'small', 20);
$headings: map-deep-set($headings, 'h1 size', 3rem);

If you have a main.s(a|c)ss file, just rename it to variables.s(a|c)ss where (a|c) is for sass or scss.