Svelte Materialify 库不加载主题样式答案

【问题标题】：Svelte Materialify library doesn't load theme stylesSvelte Materialify 库不加载主题样式
【发布时间】：2021-11-07 06:05:45
【问题描述】：

我正在使用最新的 Svelte Kit 以及 Svelte Materialify 库来进行快速 UI 开发。库文档描述了主题开发方法：

您想自定义一些 SCSS 变量吗？不用担心，只需将它们放在您创建的 _material-theme.scss 中：
$primary-color: #004d26;
...

但是这种方法不起作用。即使我在 Svelte Kit 配置中指定了文件夹并安装了所有依赖项：

preprocess: preprocess({
    scss: {
        includePaths: [resolve('./theme')] // resolve imported from path
    },
    postcss: {
        plugins: [postAutoprefixer]
    }
}),

【问题讨论】：

标签： sass svelte sveltekit

【解决方案1】：

您可以尝试在 __layout.svelte 中添加带有“global”和 lang="scss" 属性的样式标签，然后在其中导入变量文件。

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

    .date-picker {
        outline-color: $input-outline-color;
    }
</style>

这对我来说很有用，可以在 main.scss 中访问我的自定义变量，并在 __layout.scss 中访问这个标签。如果您在树下的任何其他组件中需要这些变量，则需要重新导入这些变量，IMO。只要您不向变量文件添加任何样式规则，这对于样式重复应该不成问题。

更新：

虽然上述方法可能有效，但不是推荐的解决方案。编译器的错误消息引导我找到正确的解决方案，此处进一步解释： svelte documentation

直接将 main.scss 样式表导入“main.js”文件，也可以是 SvelteKit 中的 __layout 文件

<script lang="ts">
    import '../app.css';
    import '../styles/main.scss';
</script>

<slot />

<style global lang="scss">
</style>

【讨论】：