{"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,"search_vec":"'1.2.0':27 'babel':2,6 'babel-plugin-transform-scss':1 'convert':9 'creat':43 'css':14 'current':24 'document':20 'function':41 'head':21 'import':11,38 'inject':16 'inlin':13 'javascript':40 'loader':34 'plugin':3,7 'releas':28 'replac':30 'runtim':23 'sass':33 'sass-load':32 'scss':5 'scss/sass':10 'sporad':29 'stabl':25 'style':37 'transform':4,36 'version':26 'webpack':31","created_at":"2026-04-25T11:16:41.046305+00:00","updated_at":"2026-04-25T11:16:41.046305+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/altgifted/babel-plugin-transform-scss","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/babel-plugin-transform-scss","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}