如何配置 eslint 来与 svelte 和 postcss-nesting 一起使用？

Question

在 svelte 中使用postcss和插件postcss-nesting非常简单——添加postcss-nesting到svelte.config.jspreprocess中的配置是唯一需要的：

import preprocess from "svelte-preprocess";
import postcssNesting from "postcss-nesting";

const config = {
    preprocess: preprocess({
        postcss: {
            plugins: [
                postcssNesting()
            ]
        }
    }),
    // ...
};

export default config;

现在我可以使用“&”语法定义嵌套 CSS。
例如，当我在example.svelte文件中有此内容时：

<div class="example">
    One <span class="nested">two</span> three
</div>

<style lang="postcss">
    .example {
        color: red;
        & .nested {
            text-decoration: underline;
        }
    }
</style>

但是，我无法找到eslint接受它的方法。它报告在 & 字符之后需要一个标识符。

Answer 1

当将 postcss 添加为 npx script 时，我遇到了与postcss-nested相同的问题npx svelte-add@latest postcss。手动添加 postcss 并设置 postcss 插件，如svelte-preprocess 文档rollup.config.js中所述，而不是 npx 变体，但效果很好。

1. 安装依赖项npm i postcss postcss-nested -D
2. preprocess: sveltePreprocess({ sourceMap: !production }),将行 替换为

   preprocess: sveltePreprocess({ 
    sourceMap: !production,
    postcss: {
        plugins: [
            require('postcss-nested')()
        ]
    }
   }),