Svelte Themes Logo Svelte Themes
Svelte Sass Template screenshot

Svelte Sass Template

Author Avatar Theme by Dceddia
Updated: 18 Mar 2021
30 Stars

A Svelte template with support for SASS / SCSS.

Github

Categories

Scss

Overview:

The Svelte Template with SASS Support is a Svelte app based on the project template found at https://github.com/sveltejs/template. It includes SASS/SCSS support through the use of svelte-preprocess. This template also provides out-of-the-box VSCode syntax highlighting, thanks to the svelte.config.js file. The app can handle various other processors enabled by svelte-preprocess such as pug, coffeescript, less, sass, stylus, postcss, and globalStyle. The project includes node-sass as a dependency for SASS support, but additional packages need to be installed for other processor support, like PostCSS.

Features:

  • Svelte App Template: Based on the project template from https://github.com/sveltejs/template.
  • SASS/SCSS Support: Integrated with svelte-preprocess to enable SASS/SCSS styling in the app.
  • VSCode Syntax Highlighting: Includes a svelte.config.js file that provides out-of-the-box syntax highlighting in VSCode.
  • Processor Support: Works with other processors enabled by svelte-preprocess, including pug, coffeescript, less, stylus, and postcss.
  • Global Style Transformation: Can transform <style global> into global styles using the globalStyle processor.
  • Node-sass Dependency: Includes node-sass as a dependency for SASS support.

Installation:

To start fresh with the Svelte Template with SASS Support, clone the template using the command:

degit dceddia/svelte-template-sass

If you already have an existing project and want to add SASS support, follow these steps:

  1. Run the following command to install the necessary packages:
npm install svelte-preprocess node-sass
  1. Update the rollup.config.js file by adding “preprocess” to the svelte plugin. You will also need to import autoPreprocess.
  2. Create a svelte.config.js file to enable VSCode support and install the Svelte for VSCode extension.

Summary:

The Svelte Template with SASS Support is a project template based on the Svelte app template with added SASS/SCSS support through svelte-preprocess. It includes out-of-the-box VSCode syntax highlighting and can handle various other processors enabled by svelte-preprocess such as pug, coffeescript, less, stylus, postcss, and globalStyle. The template requires node-sass as a dependency for SASS support and provides instructions for installation and integration into new or existing projects.