Skip to content

Latest commit

 

History

History
30 lines (20 loc) · 3 KB

other-css-preprocessors.md

File metadata and controls

30 lines (20 loc) · 3 KB
Raw

Using other CSS-languages than CSS/Less/SCSS

The svelte-language-server and therefore the VSCode extension can only handle CSS/Less/SCSS syntax. To get other syntaxes working, read on.

PostCSS

  1. Setup you build and svelte.config.js (general info) correctly and add a postcss.config.js. We recommend using svelte-preprocess. For the svelte.config.js, this should be enough:
const sveltePreprocess = require('svelte-preprocess');
module.exports = { preprocess: sveltePreprocess({ postcss: true }) }

Note that within your config files you can only use node-syntax, things like import ... or export const ... are not allowed.

  1. Either add lang="postcss" to each of your <style> tags where you plan on using PostCSS, or disable CSS diagnostics completely by adding "svelte.plugin.css.diagnostics.enable": false within your settings. If you still want diagnostics, install the Stylelint VSCode extension. If you want better syntax highlighting, install the PostCSS VSCode extension.

TailwindCSS

We assume you already have setup TailwindCSS within your Svelte project. If not, this article and this article explain two approaches on how to do it.

To use TailwindCSS with the VSCode extension:

  1. Setup the svelte.config.js the same way you would for PostCSS - see the section above (first point) for more details
  2. Install the Tailwind CSS VSCode extension
  3. Either add lang="postcss" to each of your <style> tags where you plan on using the Tailwind CSS directives such as @apply, or disable CSS diagnostics completely by adding "svelte.plugin.css.diagnostics.enable": false within your settings. If you still want diagnostics, install the Stylelint VSCode extension and configure it accordingly. Note that within your config files you can only use node-syntax, things like import ... or export const ... are not allowed.

SASS

  1. Install the SASS VSCode extension
  2. Add lang="sass" to your <style> tags
  3. You now get proper syntax highlighting. If you have problems with formatting, turn it off. If you experience wrong css diagnostic errors, turn it off