分别导入Vuetify样式

Question

我正在其中一个项目中使用Vuetify。问题在于，建议的导入样式的方法是通过包含预渲染的vuetify.min.css。对于我来说，该文件仍然太大，只有452Kb。

由于到目前为止我还没有使用vuetify的所有组件（我没有使用99％的样式），所以我只想导入那些核心样式以及与我使用的组件相关的几种样式。我希望我的最终样式表尽可能精简。

我看到它使用sass文件作为源。有没有办法使用这些sass文件来编译自己的自定义vuetify CSS？如果是这样，如何？

Answer 1

如果您正在使用带有vuetify-loader的最新VUE CLI工具集，并且应该正确地按照安装说明进行操作，则无需指定要导入样式的行。

确保vue.config.js中已设置：

  transpileDependencies: [
    'vuetify'
  ],

在某些情况下，当您看到与尝试加载缺少的组件有关的错误时，可能还需要手动注册某些组件，这是一个示例示例，该示例如何解决缺少Vuetify组件的边缘情况：

// src/plugins/vuetify.js

import Vuetify, { VBtn, VDivider, VIcon, VLayout, VSnackbar } from 'vuetify/lib'

Vue.use(Vuetify, {
  components: { VBtn, VDivider, VIcon, VLayout, VSnackbar }
})

export default new Vuetify({})

// src/main.js

import vuetify from './plugins/vuetify'

...

new Vue({
  router,
  vuetify,
  render: h => h(App)

}).$mount('#app')

但是我确实导入了Vuetify变量以用于自定义SCSS代码：

@import "~vuetify/src/styles/settings/variables";