Vue插件开发-全球导入SCSS

Question

我正在开发一个Vue插件，并试图导入和使用一个SCSS文件(而SCSS文件中又包含了大量其他SCSS导入)。因此，理想情况下，我希望为插件导入和注入SCSS文件。

我尝试了以下方法(但它们不起作用)：

1.使用vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: `@import "@/assets/scss/main.scss";`,
            },
        },
    },
}

此方法在构建插件时不绑定样式。在构建中没有保留任何样式。

2.只需在插件模块中导入

import MyComponent from "./plugin/MyComponent.vue";
import "./assets/main.scss"; // Tried it here

export default {
    install: (app: any): void => {
        require("./assets/main.scss"); // And here as well
        app.component("my-component", MyComponent);
    },
};

这种方法也不起作用，甚至在开发时直接插入插件时也是如此。

3.导入插件组件

我在插件中使用的每个组件中导入了SCSS文件。例如，在MyComponent.vue中，我可以使用：

<template>...</template>
<style>
@import "../assets/main.scss";
</style>

在这种情况下，它也不起作用。

在全球范围内导入SCSS文件并使其在插件中工作的正确方法是什么？

编辑：

在已安装的插件中，我可以看到有一个打包的CSS文件，但我不知道为什么它没有被应用。类名也包含所有字体导入和其他内容。但它没有被应用。

Answer 1

通过在extract: false中添加css来解决问题。这条线花了我14个小时才弄清楚，我希望其他人不用再经历这场混乱了。以下是完整的配置：

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: `@import "@/assets/scss/main.scss";`,
            },
        },
        extract: false,
    },
};

这也将照顾SCSS变量，混合等。插件将不附带一个单独的CSS文件，所有将包括在捆绑的js文件。