为 Vue Web 组件使用外部样式表/防止内联样式答案

【问题标题】：Use external stylesheet for Vue web component / Prevent inlining styles为 Vue Web 组件使用外部样式表/防止内联样式
【发布时间】：2021-07-14 18:05:42
【问题描述】：

我正在使用 vue-cli-service 来构建 Web 组件。此组件中引用的所有样式始终内联到 javascript 文件中。

vue-cli-service build --target wc --name component-name  --inline-vue  ./src/components/someComponent.vue

有没有办法强制 Vue 将组件 CSS 提取到单独的文件中，而不是将其内联到 dist/component-name.js 文件中？

或者，是否有一种简单的方法可以让外部用户覆盖 Shadow DOM 样式？

【问题讨论】：

标签： vue.js vue-cli

【解决方案1】：

不幸的是，如果不编写自定义 webpack 插件，我不相信有一种自动化的方法可以做到这一点。您将不得不手动迁移 CSS。

如果你使用 webpack，你可以把你所有的组件 CSS 移动到一个单独的文件中。

从那里，您可以使用require 或import 将其包含在您的main.js 文件中：

import './css/styles.css';

如果您不使用 webpack 或者您只想在特定组件中包含 CSS 文件，那么您可以在组件本身中导入文件。

只需创建一个 <style> 块并在其中导入 CSS：

<style>
  @import './css/styles.css';
</style>

您也可以通过将这种<style> 块方法添加到您的App.vue 文件中来全局使用它。

【讨论】：

这也是我的想法。不幸的是，用于构建 Web 组件的 --target wc 也会拉入所有外部文件，甚至在 vue.config.js 中不尊重 css.extract。