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

2. Update the rollup.config.js file by adding “preprocess” to the svelte plugin. You will also need to import autoPreprocess.
3. 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.