Блог

Я создал проект со снежным покровом для стройности, в котором я пытаюсь использовать попутный ветер для укладки, но использование таких состояний, как наведение или фокусировка, приводит к тому, что код vs выдает ошибку

 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.  

Одним из примеров кода, который вызывает проблему, является

 lt;style lang="postcss"gt;  button {  @apply py-2 px-6 rounded-lg shadow-md;  }   .hoverable {  @apply hover:opacity-90;  } lt;/stylegt;  

Это и есть пакет.json

 {  "scripts": {  "start": "run-p routify snp",  "build": "routify -b amp;amp; routify export amp;amp; 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,  }), };  

snowpack.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: [], };  

У вас есть какие-либо идеи, если это проблема с конфигурацией или что-то связано с редактором?