使用目标“Web 组件”构建 Vue 应用程序 - 未应用 SCSS 样式？答案

【问题标题】：Building Vue app with target "Web Component" - SCSS styling not applied?使用目标“Web 组件”构建 Vue 应用程序 - 未应用 SCSS 样式？
【发布时间】：2021-06-08 05:02:17
【问题描述】：

所以我已经构建了一个非常小的应用程序，我想将它作为 Web 组件集成到网站中。所以我使用vue-cli-service build --target wc --inline-vue --name name-of-component 构建应用程序

但是 SCSS 样式不包括在内？它在开发期间的实时重新加载中运行良好。 SCSS 文件被导入到 main.js 文件中，如下所示：

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import './assets/main.scss';

Vue.config.productionTip = false;

new Vue({
    store,
    render: (h) => h(App),
}).$mount('#app');

【问题讨论】：

标签： vue.js sass vuejs2

【解决方案1】：

我不知道为什么，但一种解决方法是在 <style> 块中而不是 <script> 中导入 SCSS：

<style lang="scss">
@import '~@/assets/main.scss';
</style>

【讨论】：

【解决方案2】：

我找到了一个混合导入的解决方案，就像 tony19 说的：

<style lang="scss">
@import '~@/assets/main.scss';
</style>

然后使用sass main.scss main.css 并在与Web 组件相同的文档中包含<link rel="stylesheet" href="main.css">。这样样式就被正确应用了。

通常我还建议在 CDN 上托管任何资产，例如 css、字体、图像、svgs 等，并在 Web 组件中使用资产的完整 url，这样您就不必包含这些在使用该组件的网页上。

【讨论】：