SvelteKit中PostCSS容器查询配置报错及rollup.config.js疑问

问题原因 #

1. PostCSS未启用容器查询特性：你的postcss.config.cjs仅开启了嵌套规则、自定义媒体查询等特性，但未显式启用容器查询（container-queries），导致PostCSS无法转译容器查询语法，Svelte样式解析器识别不了原生语法从而抛出错误。
2. 无需rollup.config.js：当前版本SvelteKit基于Vite构建，默认不再使用Rollup配置文件，缺少该文件不是问题根源。
3. 样式代码笔误：报错代码中的grid-template-column应为grid-template-columns（复数形式），不过这不是引发当前语法报错的直接原因。

解决方案 #

1. 更新PostCSS配置，启用容器查询特性 #

修改postcss.config.cjs，在postcssPresetEnv的features中添加容器查询特性：

const postcssPresetEnv = require('postcss-preset-env');

const config = {
    plugins: [
        postcssPresetEnv({
            stage: 3,
            features: {
                'nesting-rules': true,
                'custom-media-queries': true,
                'media-query-ranges': true,
                'container-queries': true // 新增启用容器查询
            },
        }),
    ],
};

module.exports = config;

2. 验证Svelte预处理配置 #

确保svelte.config.js中的svelte-preprocess配置正确，PostCSS已正常启用：

import adapter from '@sveltejs/adapter-auto';
import sveltePreprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: sveltePreprocess({ postcss: true }),
    kit: {
        adapter: adapter(),
    },
};

export default config;

3. 修正样式代码笔误 #

将grid-template-column改为复数形式：

<style lang="postcss">
    .displayContainer {
        container: homeDisplay / inline-size;
    }
    .queryWrapper {
        @container homeDisplay (min-width: 450px) {
            display: grid;
            grid-template-columns: 350px 1fr; // 修正为复数
            gap: 20px;
        }
    }
</style>

4. 重启开发服务 #

修改配置后，关闭当前SvelteKit开发服务，重新执行npm run dev，让新的PostCSS配置生效。

完成以上步骤后，容器查询语法会被正确转译，语法报错即可消除。

内容的提问来源于stack exchange，提问作者joshCode25