Lightningcss 和@custom media

Question

我安装lightningcss并配置vite配置。所以我定义了lightningcss和customMedia: true。

import browserslist from "browserslist";
import { browserslistToTargets } from "lightningcss";


    return defineConfig({
        build: {
            outDir: "build",
            cssMinify: "lightningcss",
        },
        css: {
            transformer: "lightningcss",
            lightningcss: {
                drafts: {
                    customMedia: true,
                },
                targets: browserslistToTargets(browsersList),
            },
        },
        plugins: [reactPlugin(), svgr(), vitePWA],
        resolve: {
            alias: [
                {
                    find: "~",
                    replacement: fileURLToPath(new URL("src", import.meta.url)),
                },
            ],
        },
        server: {
            port: Number(VITE_APP_DEVELOPMENT_PORT),
            proxy: {
                [VITE_APP_API_ORIGIN_URL as string]: {
                    changeOrigin: true,
                    target: VITE_APP_PROXY_SERVER_URL,
                },
            },
        },
    });
};

我还用

@custom-media --medium-screen (width <= 768px);

创建 media.css 但是当我尝试打开项目时，我得到 [plugin:vite:css] Custom media query --medium-screen is not Defined

我期望我可以使用这个变量。我的配置有什么问题吗？ “vite”：“5.0.12”和“lightningcss”：“1.22.1”。

Answer 1

嘿嘿， 你使用CSS层吗？ 我遇到了类似的问题，并发现，当您不使用 css 层时，lightningcss 中的自定义媒体才有效。也许这是lightningcss中的一个错误？