postcss-conditionals with mixins (vite + postcss.config.js)答案

【问题标题】：postcss-conditionals with mixins (vite + postcss.config.js)postcss-conditionals with mixins (vite + postcss.config.js)
【发布时间】：2023-01-06 21:37:23
【问题描述】：

我在将 postcss 条件句转换为 css 时遇到问题。我在用着邀请处理文件并输出一个css文件。一切似乎都在进行，直到我尝试转换条件（见下文）为止。

这是我的邀请文件：

import { defineConfig } from 'vite';
import postcss from './postcss.config.js';
import dns from 'dns';

dns.setDefaultResultOrder('verbatim');

export default defineConfig({
    root: 'src',
    build: {
        manifest: 'vite-manifest.json',
        rollupOptions: {
            input: {
                main: './src/scripts/main.js',
            },
        },
        outDir: '../dist',
        emptyOutDir: true,
    },
    css: {
        postcss,
        devSourcemap: true,
    },
    server: {
        hmr: {
            protocol: 'ws',
        },
    },
});

这是我的 postcss 文件的简化版本：

import atImport from 'postcss-import';
import atMixins from 'postcss-mixins';
import atIf from 'postcss-conditionals';
import nested from 'postcss-nested';

export default {
    plugins: [
        atImport,
        atMixins,
        atIf,
        nested,
    ],
};

我正在尝试解析的 mixin：

@define-mixin center-x $position, $distance {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    @if $position == top {
        top: $distance;
        bottom: auto;
    } @else {
        top: auto;
        bottom: $distance;
    }
}

这给了我这个错误：[vite:css] postcss-conditionals: src\styles\base\mixins.css:6:5: Failed to parse expression file: src/styles/main.css error during build: CssSyntaxError: postcss-conditionals: src\styles\base\mixins.css:10:5: Failed to parse expression

此外，将 mixin 中的 if else 替换为：

@if 3 < 5 {
    background: green;
}

没有给我那个错误。

也许混合变量在条件可以使用它们之前还没有解决，但我不知道如何先解决这些问题。真的希望有人知道如何解决这个问题。

【问题讨论】：

标签： css vite postcss css-modules

【解决方案1】：

今天又试了一次，仍然无法修复，所以我更换了以下插件：

postcss-for
postcss-每个
postcss-each-变量
postcss-mixins
postcss 条件

对于 postcss-advanced-variables，其中组合条件和 mixins 开箱即用，缺点是我必须使用 SASS 语法而不是 postcss 语法，但我想没关系。

【讨论】：