在 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;
Run Code Online (Sandbox Code Playgroud)
现在我可以使用“&”语法定义嵌套 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>
Run Code Online (Sandbox Code Playgroud)
但是,我无法找到eslint接受它的方法。它报告在 & 字符之后需要一个标识符。