时间戳

首页 > 解决方案 > Svelte Materialify 库不加载主题样式

sass - Svelte Materialify 库不加载主题样式

问题描述

我正在使用最新的 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]
    }
}),

标签： sasssveltesveltekit

解决方案

您可以尝试在 __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 文档

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

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

<slot />

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

推荐阅读