Registry / web-framework / vite-plugin-sass

vite-plugin-sass

library0.1.0jsnpmunverified

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.

web-framework

npm install vite-plugin-sass

package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SASS

vite-plugin-sass

web-frameworkjavascriptv0.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vitePluginSass

✓ import vitePluginSass from 'vite-plugin-sass'

✗ const vitePluginSass = require('vite-plugin-sass');

The default export is a function; CJS require is allowed but ESM is recommended for Vite projects.

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');

Debug

Known issues

gotchaPlugin 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.

affects: >=0.1.0

gotchaSource 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.

affects: >=0.1.0

deprecatedThe 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.

affects: >=0.1.0

Errors

Common errors & fixes

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

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: Module not found: 'sass'

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

fix

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

TypeError: sass.render is not a function

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.

Upgrade

Version history

0.1.0latest on npm

Audit

Dependencies

sassrequiredRequired peer dependency for Sass compilation, used internally by sass.render()

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-plugin-sass ↗