{"id":19223,"library":"babel-plugin-transform-scss","title":"babel-plugin-transform-scss","description":"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.","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/altgifted/babel-plugin-transform-scss","tags":["javascript","webpack","sass-loader","transpile","transform","scss","sass","css","babel"],"install":[{"cmd":"npm install babel-plugin-transform-scss","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-scss","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-scss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Compiles SCSS to CSS","package":"node-sass","optional":false},{"reason":"Alternative SCSS compiler (dart-sass)","package":"sass","optional":false},{"reason":"Node.js path module for resolving file paths","package":"path","optional":false}],"imports":[{"note":"It's a Babel plugin, not a runtime import.","wrong":"import it in JavaScript code","symbol":"babel-plugin-transform-scss","correct":"Add to Babel plugins list in config, e.g. 'plugins': ['babel-plugin-transform-scss']"}],"quickstart":{"code":"// Install: npm install --save-dev babel-plugin-transform-scss node-sass sass\n// .babelrc or babel.config.js:\n{\n  \"plugins\": [\n    [\"babel-plugin-transform-scss\", { \"include\": \"node_modules\" }]\n  ]\n}\n// Then in your source:\nimport React from 'react';\nimport './style.scss';\n\nconst Button = () => {\n  return <div className=\"button\">Custom button</div>;\n};\nexport default Button;","lang":"javascript","description":"Shows how to install and configure the plugin, and how it transforms SCSS imports into inline styles at runtime."},"warnings":[{"fix":"Install sass instead of node-sass, and ensure both are listed as peer dependencies.","message":"node-sass is deprecated. Consider using sass (dart-sass) instead.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Do not use in server-side rendering (SSR) without checking for window.","message":"Plugin only works in browser environments because it uses document.head.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure all SCSS imports start with './' or '../'.","message":"Import paths must be relative (e.g., './style.scss'). Absolute or module paths may fail.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add include option if you want to restrict transformation to specific folders.","message":"v1.2.0 introduced options.include to filter directories. Old configs without include may process too many files.","severity":"breaking","affected_versions":">=1.2.0"},{"fix":"Update selectors or tests to use generated unique IDs.","message":"Identical filenames in different directories now have unique data-scss-component attributes; old code relying on class names may break.","severity":"gotcha","affected_versions":">=1.2.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Upgrade to v1.0.11 or later.","cause":"Plugin version <1.0.11 had a bug when parsing certain SCSS files.","error":"Cannot read properties of undefined (reading '0')"},{"fix":"Run 'npm install --save-dev node-sass' or switch to sass.","cause":"node-sass is not installed as a peer dependency.","error":"Module not found: Error: Can't resolve 'node-sass'"},{"fix":"Use sass (dart-sass) instead of node-sass.","cause":"Incompatible version of node-sass with Node.js or platform.","error":"Error: Node Sass does not yet support your current environment"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}