在我在vuetify项目中使用的包中加载vuetify

Question

什么是正确的方式，加载到一个包，我使用的vuetify项目？在为项目服务时，一切看起来都很好，但当我构建项目时，css/sass遇到了一些问题

我尝试过的事情：

css加载器: css加载了两次，所以我不能覆盖sass variables

• Without vuetify加载程序:包没有vuetify css，所以它看起来像horrible

• Without vuetify加载器和vuetify.min.css: css加载了两次，所以我不能覆盖sass变量，而加载的css都是css，所以它是巨大的css。

我的包名为vuetify resource，这是index.js的源代码(没有vuetify加载器)，此时一切都可以在npm run serve上工作，但是当我构建包时，并不能“访问”vuetify css。

import Vue from 'vue';
import Vuetify from 'vuetify';
import VuetifyResourceComponent from './VuetifyResource.vue';

Vue.use(Vuetify);
const VuetifyResource = {
    install(Vue, options) {
        Vue.component('vuetify-resource', VuetifyResourceComponent);

    },
};

export default VuetifyResource;

Answer 1

为了解决我的问题，我不得不做几件事。

1. 将vuetify和vue
2. 的对等依赖关系添加到webpack外部，因此当有人使用该包时，该包使用的包不再导入vuetify
3. ，不再在不需要的index.js中导入vuetify，使用
4. 导入的包导入了在每个.vue文件

G 211中使用的特定组件。

例如，：

Vue.config.js

module.exports = {
    configureWebpack: {
        externals: {'vuetify/lib': 'vuetify/lib'},
    },
};

index.js

import VuetifyResourceComponent from './VuetifyResource.vue';

const VuetifyResource = {
    install(Vue, options) {
        Vue.component('vuetify-resource', VuetifyResourceComponent);

    },
};

export default VuetifyResource;

component.vue的一部分

import { VDataTable } from 'vuetify/lib';

export default {
    name: 'vuetify-resource',
    components: {
        VDataTable
    },

Answer 2

里卡多的答案中的第4步是不需要的，如果你使用vuetify-loader，它会帮你完成任务。

我将修改步骤2，以将Vuetify的样式/css从包中排除在外。如果不排除它们，当您的库和应用程序之间的Vuetify版本不同时，您可能会遇到样式问题。

在vue.config.js中使用正则表达式，如：configureWebpack: { externals: /^vuetify\// }。这样，库包中只包含了您自己的样式。