{"id":16999,"library":"ember-cli-sass","title":"Sass integration for Ember CLI","description":"Ember CLI Sass is an addon for Ember CLI applications that integrates Sass preprocessing into the build pipeline. It provides robust support for generating source maps, configuring include paths, and handling multiple CSS output files via Ember CLI's `outputPaths` configuration. Currently stable at version 11.0.1, the package is actively maintained with recent releases addressing internal chore items and node version compatibility. It defaults to using Dart Sass (compiled to pure JavaScript) for compilation but offers explicit configuration to utilize alternative implementations like `node-sass` (which uses LibSass for potentially faster compilation), allowing developers to choose based on their project's performance and dependency needs. It is a fundamental tool for styling Ember.js projects with Sass, ensuring seamless integration with the Ember CLI build system.","status":"active","version":"11.0.1","language":"javascript","source_language":"en","source_url":"git://github.com/adopted-ember-addons/ember-cli-sass","tags":["javascript","ember-addon","sass"],"install":[{"cmd":"npm install ember-cli-sass","lang":"bash","label":"npm"},{"cmd":"yarn add ember-cli-sass","lang":"bash","label":"yarn"},{"cmd":"pnpm add ember-cli-sass","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Default Sass implementation. Required at runtime for compilation, though not a direct npm dependency of `ember-cli-sass` itself, it must be installed alongside.","package":"sass","optional":true},{"reason":"Alternative Sass implementation (LibSass binding) for potentially faster compilation. Used explicitly via `sassOptions.implementation`.","package":"node-sass","optional":true}],"imports":[{"note":"Configuration for ember-cli-sass is done by passing a `sassOptions` object to the `EmberApp` constructor in `ember-cli-build.js`.","symbol":"EmberApp config","correct":"let app = new EmberApp(defaults, { sassOptions: { /* ... */ } });"},{"note":"Used in `ember-cli-build.js` to explicitly set `node-sass` as the implementation for `sassOptions`.","wrong":"import nodeSass from 'node-sass';","symbol":"nodeSass (implementation)","correct":"const nodeSass = require('node-sass');"},{"note":"While `ember-cli-sass` uses `sass` (Dart Sass) by default, you can explicitly pass it as the implementation in `ember-cli-build.js` similar to `node-sass`.","wrong":"import sass from 'sass';","symbol":"sass (implementation)","correct":"const sass = require('sass');"}],"quickstart":{"code":"/* ember-cli-build.js */\nconst EmberApp = require('ember-cli/lib/broccoli/ember-app');\nconst defaults = require('lodash.defaultsdeep');\n\n// Optional: If you want to use node-sass for potentially faster compilation\n// const nodeSass = require('node-sass');\n\nmodule.exports = function(env) {\n  let app = new EmberApp(defaults(env.APP, {\n    // Configure ember-cli-sass options here\n    sassOptions: {\n      // implementation: nodeSass, // Uncomment to use node-sass\n      includePaths: [\n        'app/styles',\n        'node_modules/my-ui-library/scss'\n      ],\n      sourceMap: true, // Defaults to true in development\n      extension: 'scss' // Defaults to 'scss'\n    },\n\n    // Example for processing multiple SASS files\n    outputPaths: {\n      app: {\n        css: {\n          app: '/assets/application-name.css',\n          'themes/alpha': '/assets/themes/alpha.css' // Compile app/styles/themes/alpha.scss\n        }\n      }\n    }\n  }));\n\n  return app.toTree();\n};\n\n/* app/styles/app.scss */\n@import 'variables';\nbody {\n  font-family: sans-serif;\n  color: $primary-color;\n}\n\n/* app/styles/_variables.scss */\n$primary-color: #336699;","lang":"javascript","description":"Demonstrates `ember-cli-sass` installation and basic configuration within `ember-cli-build.js`, including `sassOptions` for include paths and an example of multiple CSS output paths."},"warnings":[{"fix":"Upgrade your Node.js version to 10 or higher. For example, using nvm: `nvm install 16 && nvm use 16`.","message":"Version 11.0.0 dropped support for Node.js versions older than 10. Users on older Node.js runtimes must upgrade their Node.js environment or remain on an older `ember-cli-sass` version.","severity":"breaking","affected_versions":">=11.0.0"},{"fix":"To use `node-sass` (LibSass), install it (`npm install --save-dev node-sass`) and configure `sassOptions.implementation` in `ember-cli-build.js`: `implementation: require('node-sass')`.","message":"By default, `ember-cli-sass` uses Dart Sass (a pure JavaScript implementation), which can be significantly slower than LibSass (via `node-sass`) for compilation. This might impact build times in larger projects.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For addon development, use `npm install --save ember-cli-sass sass` (or `node-sass`) instead of `--save-dev`.","message":"When developing an Ember addon and wanting to distribute compiled CSS, `ember-cli-sass` and the chosen Sass implementation (e.g., `sass`) must be installed as `dependencies` (not `devDependencies`) in the addon's `package.json` to ensure compilation into `dist/assets/vendor.css`.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Install the `sass` package: `npm install --save-dev sass`.","cause":"The default Dart Sass implementation (or 'sass' package) is missing from your project's `node_modules`.","error":"Error: Cannot find module 'sass'"},{"fix":"Try running `npm rebuild node-sass` to recompile the binding for your environment. If issues persist, check the `node-sass` GitHub repository for compatible Node.js versions or consider switching to the default `sass` (Dart Sass) implementation.","cause":"`node-sass` has specific binary requirements and might not be compatible with your Node.js version or operating system if pre-compiled binaries are not available or fail to build.","error":"Node Sass does not yet support your current environment: OS X 64-bit with Node.js X.Y.Z"},{"fix":"Review the specified Sass file and line number for syntax errors. Common issues include unmatched braces, parentheses, or incorrect use of Sass features.","cause":"Indicates a syntax error in your Sass/SCSS file, such as an unclosed curly brace, missing semicolon, or incorrect nesting.","error":"Sass compilation failed: file-name.scss\nError: expected '}'"}],"ecosystem":"npm","meta_description":null}