时间戳

首页 > 解决方案 > 如何在 Vue 插件中需要一个 css 文件

javascript - 如何在 Vue 插件中需要一个 css 文件

问题描述

我正在使用 Vue 设计系统，以便在多个 Vue 应用程序中重用组件和样式。

我正在尝试在 DS 导出中包含一个全局 CSS 文件，但我无法在应用程序中显示它。有小费吗 ？

到目前为止，我已经尝试过这个似乎没有加载所需的文件。

// Install the above defined components
const System = {
  install(Vue) {
    require("./styles/global.scss") 

    components.forEach(component => Vue.component(component.name, component))
  },
}
export default System

这将用作：

import DesignSystem from "@/system"
Vue.use(DesignSystem)

我在 Vue 文档中找不到任何关于使用插件加载 CSS 的指南。

标签： javascriptvue.jswebpack

解决方案

由于 Vue 插件本质上是一组组件，因此您可以像捆绑任何其他组件一样捆绑它的 CSS。只需将其添加到插件组件的根目录：

<style lang="scss">
@import "./styles/global.scss";
</style>

推荐阅读