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

Posted 2023-02-16

【中文标题】在我在 vuetify 项目中使用的包中加载 vuetify

【英文标题】：Loading vuetify in a package that i use in a vuetify project

【发布时间】：2020-08-28 00:27:19

【问题描述】：

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

我尝试过的事情：

使用 vuetify 加载器：css 加载了两次，因此我无法覆盖 sass 变量 没有 vuetify loader：包没有 vuetify css，所以看起来很糟糕 没有带有 vuetify.min.css 的 vuetify 加载器：css 加载了两次，所以我无法覆盖 sass 变量，并且加载的 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;

【参考方案1】：

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

制作vuetify和vue的peer依赖 将 vuetify 添加到 webpack 外部，因此当有人使用该包时，该包使用该项目 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;

component.vue 的一部分

import  VDataTable  from 'vuetify/lib';

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

【参考方案2】：

如果您使用vuetify-loader，则不需要里卡多回答中的第 4 步，它会为您完成这项工作。

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

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

【讨论】：

这曾经是我这样做的方式，直到我发现我的css在使用这个包的项目中被加载了两次。因为它被导入了两次，其中一个不包含 variables.scss 更改，因此您无法更改变量。你是说你没有这个问题吗？你知道这是否是最近的行为吗？ vuetify 核心团队的某个人帮助我完成了 anwser