Vue插件开发——全局导入SCSS

Question

我正在开发一个 Vue 插件，我正在尝试导入和使用一个 SCSS 文件（该文件又包含一堆其他 SCSS 导入）。所以理想情况下，我想为插件全局导入和注入 SCSS 文件。

我已经尝试了以下方法（但它们不起作用）：

1。使用 vue.config.js

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

此方法在构建插件时不会捆绑样式。 None 的样式保留在构建中。

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文件，但不知道为什么没有应用。 class 名称也包含所有字体导入和内容。但它没有被应用。

Answer 1

通过在 vue.config.js 中将 extract: false 添加到 css 来解决。这一行的事情花了我 14 个小时才弄清楚，我希望没有其他人再经历这个烂摊子。这是完整的配置：

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

这也将处理 SCSS 变量、mixin 等。插件不会随附单独的 CSS 文件，所有内容都将包含在捆绑的 js 个文件。