Registry / web-framework / babel-plugin-transform-scss

babel-plugin-transform-scss

library1.2.0jsnpmunverified

Babel plugin that converts SCSS/SASS imports to inline CSS and injects them into the document head at runtime. Current stable version 1.2.0, released sporadically. Replaces webpack sass-loader by transforming style imports into JavaScript functions that create <style> tags. Unique for Babel-centric builds without webpack, but requires peer dependencies node-sass ^8.0.0 and sass ^1.3.0. Limited maintainer activity and sparse documentation.

web-framework

npm install babel-plugin-transform-scss

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TRANS

babel-plugin-transform-scss

web-frameworkjavascriptv1.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

babel-plugin-transform-scss

✓ Add to Babel plugins list in config, e.g. 'plugins': ['babel-plugin-transform-scss']

✗ import it in JavaScript code

It's a Babel plugin, not a runtime import.

Shows how to install and configure the plugin, and how it transforms SCSS imports into inline styles at runtime.

// Install: npm install --save-dev babel-plugin-transform-scss node-sass sass // .babelrc or babel.config.js: { "plugins": [ ["babel-plugin-transform-scss", { "include": "node_modules" }] ] } // Then in your source: import React from 'react'; import './style.scss'; const Button = () => { return <div className="button">Custom button</div>; }; export default Button;

Debug

Known issues

deprecatednode-sass is deprecated. Consider using sass (dart-sass) instead.

fix

Install sass instead of node-sass, and ensure both are listed as peer dependencies.

affects: >=1.0.0

gotchaPlugin only works in browser environments because it uses document.head.

fix

Do not use in server-side rendering (SSR) without checking for window.

affects: >=1.0.0

gotchaImport paths must be relative (e.g., './style.scss'). Absolute or module paths may fail.

fix

Ensure all SCSS imports start with './' or '../'.

affects: >=1.0.0

breakingv1.2.0 introduced options.include to filter directories. Old configs without include may process too many files.

fix

Add include option if you want to restrict transformation to specific folders.

affects: >=1.2.0

gotchaIdentical filenames in different directories now have unique data-scss-component attributes; old code relying on class names may break.

fix

Update selectors or tests to use generated unique IDs.

affects: >=1.2.0

Errors

Common errors & fixes

Cannot read properties of undefined (reading '0')

Plugin version <1.0.11 had a bug when parsing certain SCSS files.

fix

Upgrade to v1.0.11 or later.

Module not found: Error: Can't resolve 'node-sass'

node-sass is not installed as a peer dependency.

fix

Run 'npm install --save-dev node-sass' or switch to sass.

Error: Node Sass does not yet support your current environment

Incompatible version of node-sass with Node.js or platform.

fix

Use sass (dart-sass) instead of node-sass.

Upgrade

Version history

1.2.0latest on npm

Audit

Dependencies

node-sassrequiredCompiles SCSS to CSS

sassrequiredAlternative SCSS compiler (dart-sass)

pathrequiredNode.js path module for resolving file paths

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/altgifted/babel-plugin-transform-scss ↗

packagehttps://www.npmjs.com/package/babel-plugin-transform-scss ↗