svelte-sass-template's Introduction

A Svelte Template with SASS Support

This Svelte app is based on the project template at https://github.com/sveltejs/template, with the addition of SASS/SCSS support from svelte-preprocess.

It supports VSCode syntax highlighting out of the box, with the svelte.config.js file. For more on how this works, read Svelte with SASS/SCSS in VSCode.

It also should handle the other processors enabled by svelte-preprocess:

pug
coffeescript or coffee
less
scss or sass
stylus
postcss
globalStyle (transform <style global> into global styles.)

This project comes with node-sass as a dependency, for SASS support, but you'll need to install other packages if you want to support e.g. PostCSS.

What to Change

Starting fresh? Clone this template with degit dceddia/svelte-template-sass and you're all set.

Got an existing project? There are only a few changes to make:

npm install svelte-preprocess node-sass
Update rollup.config.js to add "preprocess" to the svelte plugin (you'll also need to import autoPreprocess)

/// rollup.config.js

// At the top, add this import:
import preprocess from 'svelte-preprocess';


/* ... */


// Add preprocess to the plugins:
export default {
  /* ... */
  plugins: [
    svelte({
      /* ... */
      preprocess: preprocess()
  }),
  /* ... */
}

Create svelte.config.js for VSCode support, and install the Svelte for VSCode extension.

// svelte.config.js
const preprocess = require('svelte-preprocess');

module.exports = {
  preprocess: preprocess()
};

svelte-sass-template's People

Contributors

Stargazers

Watchers

svelte-sass-template's Issues

How to get SASS working with vscode?

Hi,

I tried this. The template comes with scss, not sass. There's a comment saying how to use sass, but it's by default scss – which is annoying considering that the name of the repo has sass and not scss :P

Also I have a problem with getting SASS syntax highlighting to work with Svelte. Do you have any information on how to make that work?