Vite Plugin Sass

0.1.0 verified Mon Apr 27 auth: no javascript

A Vite plugin that integrates the sass package to compile .scss files into CSS within a Vite project. Version 0.1.0 is the initial release. It provides a simple wrapper around sass.render(), checking for .scss extension before transforming. Differentiators: minimal configuration, straightforward CJS/ESM support. However, it lacks advanced features like source maps, custom importer, or automatic dependency tracking. The package is experimental and may have limited community adoption.

Common errors

error Error: [vite-plugin-sass] File does not have .scss extension. ↓

cause The plugin only transforms files with .scss extension; .sass files are ignored.

fix

Rename .sass files to .scss or use a different plugin that supports .sass.

error Error: Module not found: 'sass' ↓

cause The sass peer dependency is missing; plugin requires it to be installed.

fix

Run 'npm install sass --save-dev' to install the peer dependency.

error TypeError: sass.render is not a function ↓

cause Using a newer version of sass (>=1.45.0) where render() is removed.

fix

Install sass@1.44.0 or use a different plugin that supports the current sass API.

Warnings

gotcha Plugin may not handle SASS variables nested in imported partials without explicit import paths. ↓

fix Explicitly import all partials in your entry .scss file using @use or @forward.

gotcha Source maps are not generated by this plugin, making debugging difficult in development. ↓

fix Consider using Vite's built-in CSS handling with sass preprocessor or another plugin that supports source maps.

deprecated The sass package's render() method is deprecated in newer sass versions; use compile() or compileString() instead. ↓

fix Upgrade the sass package to latest and adjust plugin usage, or switch to a maintained plugin.

Install

npm install vite-plugin-sass

yarn add vite-plugin-sass

pnpm add vite-plugin-sass

Imports

vitePluginSass
wrong
```
const vitePluginSass = require('vite-plugin-sass');
```
correct
```
import vitePluginSass from 'vite-plugin-sass'
```
The default export is a function; CJS require is allowed but ESM is recommended for Vite projects.

Quickstart

Minimal setup: install plugin, add to Vite config, import .scss file and see compiled CSS in output.

// vite.config.js
import { defineConfig } from 'vite';
import vitePluginSass from 'vite-plugin-sass';

export default defineConfig({
  plugins: [vitePluginSass()],
});

// src/styles.scss
$primary-color: #333;
body { color: $primary-color; }

// src/main.js
import './styles.scss';
console.log('Sass imported');