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

将vuetify加载到我在vuetify项目中使用的包中的正确方法是什么？ 当服务于项目时，一切似乎都很好，但是当我构建项目时，我遇到了css/sass的一些问题

我尝试过的事情：

• 使用vuetify加载程序：css加载两次，因此我无法覆盖sass变量
• 没有vuetify加载程序：这个包没有vuetify css，所以看起来很糟糕
• 没有vuetify loader with vuetify.min.css：css加载两次，因此我无法覆盖sass变量，而加载的css是所有css，因此它非常庞大

我的包名为vuetify resource，这是

index.js

（不带vuetify加载程序）的源代码。此时，所有东西都可以在

npm run service

上运行，但当我构建包时，它无法“访问”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;

---

为了解决我的问题，我必须做几件事。

使vuetify和vue具有对等依赖关系

将vuetify添加到Web包外部，这样当有人使用该包时，该包将使用该项目vuetify

不再在index.js中导入vue和vuetify。不需要，使用包的项目导入

导入在每个.vue文件中使用的特定组件

---

例如：

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;

组件的一部分。vue

import { VDataTable } from 'vuetify/lib';

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

---

如果您使用

vuetify loader

，则不需要Ricardo答案中的步骤4，它将为您完成这项工作

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

---

在vue.config.js中使用如下正则表达式：

configureWebpack:{externals:/^vuetify\/}

。这样，库包中只包含您自己的样式。

我以前也是这样做的，直到我发现这样，我的css在使用此包的项目中加载了两次。因为它导入了两次，其中一个不包含变量。SCS会更改，因此无法更改变量。你是说你没有这种感觉吗？你知道这是不是最近的行为吗？vuetify核心团队的某个人帮助我完成了anwser