使用 postcss 分号或块预期错误 svelte

Question

我已经建立了一个带有 Snowpack 的 svelte 项目，其中我尝试使用顺风进行样式设置，但是使用悬停或焦点等状态会导致 VS Code 抛出错误

Semicolon or block is expected

If you expect this syntax to work, here are some suggestions:
If you use less/SCSS with `svelte-preprocess`, did you add `lang=\"scss\"`/`lang=\"less\"` to your `style` tag? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`.
Did you setup a `svelte.config.js`? 
See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.

导致问题的一个代码示例是

<style lang="postcss">
  button {
    @apply py-2 px-6 rounded-lg shadow-md;
  }

  .hoverable {
    @apply hover:opacity-90;
  }
</style>

这是package.json

{
  "scripts": {
    "start": "run-p routify snp",
    "build": "routify -b && routify export && snowpack build",
    "test": "web-test-runner \"src/**/*.test.ts\"",
    "routify": "routify",
    "snp": "snowpack dev"
  },
  "dependencies": {
    "@snowpack/plugin-run-script": "^2.3.0",
    "postcss-import": "^14.0.2",
    "svelte": "^3.37.0"
  },
  "devDependencies": {
    "@roxi/routify": "^2.18.3",
    "@snowpack/plugin-dotenv": "^2.2.0",
    "@snowpack/plugin-postcss": "^1.4.3",
    "@snowpack/plugin-svelte": "^3.6.1",
    "@snowpack/plugin-typescript": "^1.2.1",
    "@snowpack/web-test-runner-plugin": "^0.2.2",
    "@testing-library/svelte": "^3.0.3",
    "@tsconfig/svelte": "^1.0.10",
    "@types/chai": "^4.2.17",
    "@types/mocha": "^8.2.2",
    "@types/snowpack-env": "^2.3.3",
    "@web/test-runner": "^0.13.3",
    "autoprefixer": "^10.4.0",
    "chai": "^4.3.4",
    "concurrently": "^6.4.0",
    "cross-env": "^7.0.3",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.3.11",
    "postcss-cli": "^9.0.2",
    "postcss-load-config": "^3.1.0",
    "snowpack": "^3.8.7",
    "svelte-preprocess": "^4.7.2",
    "tailwindcss": "^2.2.19",
    "typescript": "^4.3.4"
  },
  "routify": {
    "extensions": "svelte,html,svx,md",
    "dynamicImports": false,
    "routifyDir": "src/.routify"
  }
}

正如您所看到的，我已经安装了 svelte-preprocess ，它应该负责处理 postcss 以及其他所需的包。项目的配置如下：

svelte.config.js

const sveltePreprocess = require("svelte-preprocess");

module.exports = {
  preprocess: sveltePreprocess({
    defaults: {
      script: "typescript",
      style: "postcss",
    },
    postcss: true,
  }),
};

雪包.config.js

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: { url: "/", static: true },
    src: { url: "/dist" },
  },
  plugins: [
    "@snowpack/plugin-svelte",
    "@snowpack/plugin-dotenv",
    "@snowpack/plugin-typescript",
    "@snowpack/plugin-postcss",
  ],
  routes: [
    /* Enable an SPA Fallback in development: */
    { match: "routes", src: ".*", dest: "/index.html" },
  ],
  optimize: {
    /* Example: Bundle your final build: */
    // "bundle": true,
  },
  packageOptions: {
    knownEntrypoints: ["@roxi/routify/runtime/buildRoutes"],
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
};

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

tailind.config.js

const production = process.env.NODE_ENV === "production";

module.exports = {
  mode: "jit",
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  purge: { content: ["./src/**/*.svelte"], enabled: production },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {/*...*/},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

您知道这是配置问题还是与编辑器有关吗？