{"_id":"@applaud/sass-loader","name":"@applaud/sass-loader","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@applaud/sass-loader","version":"1.0.0","description":"Sass loader for webpack","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Applaud-devpack/sass-loader.git"},"author":{"name":"Applaud"},"homepage":"https://github.com/Applaud-devpack/sass-loader","bugs":{"url":"https://github.com/Applaud-devpack/sass-loader/issues"},"main":"dist/cjs.js","engines":{"node":">= 6.9.0"},"scripts":{"start":"npm run build -- -w","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files","clean":"del-cli dist","commitlint":"commitlint --from=master","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different","lint:js":"eslint --cache src test","lint":"npm-run-all -l -p \"lint:**\"","prepare":"npm run build","release":"standard-version","security":"npm audit","test:only":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watch","test:manual":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","test:coverage":"cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage","pretest":"npm run lint","test":"cross-env NODE_ENV=test npm run test:coverage","defaults":"webpack-defaults"},"peerDependencies":{"webpack":"^3.0.0 || ^4.0.0"},"dependencies":{"clone-deep":"^4.0.1","loader-utils":"^2.0.3","neo-async":"^2.5.0","pify":"^4.0.1","semver":"^6.3.0"},"devDependencies":{"@babel/cli":"^7.5.5","@babel/core":"^7.5.5","@babel/preset-env":"^7.5.5","@commitlint/cli":"^8.1.0","@commitlint/config-conventional":"^8.1.0","@webpack-contrib/defaults":"^5.0.2","@webpack-contrib/eslint-config-webpack":"^3.0.0","babel-jest":"^24.9.0","bootstrap":"^4.3.1","bootstrap-sass":"^3.3.5","chokidar":"^2.1.6","commitlint-azure-pipelines-cli":"^1.0.2","cross-env":"^5.2.0","css-loader":"^3.2.0","del":"^4.1.1","del-cli":"^1.1.0","eslint":"^6.1.0","eslint-config-prettier":"^6.0.0","eslint-plugin-import":"^2.14.0","file-loader":"^4.2.0","husky":"^3.0.3","jest":"^24.9.0","jest-junit":"^7.0.0","jquery":"^3.4.1","lint-staged":"^9.2.1","memory-fs":"^0.4.1","node-sass":"^4.5.0","npm-run-all":"^4.1.5","nyc":"^14.1.1","popper.js":"^1.15.0","prettier":"^1.15.2","raw-loader":"^3.1.0","sass":"^1.3.0","standard-version":"^7.0.0","style-loader":"^1.0.0","webpack":"^4.5.0","webpack-cli":"^3.1.0","webpack-dev-server":"^3.1.4"},"keywords":["sass","libsass","webpack","loader","applaud"],"gitHead":"79f84ecd48ff0d31f67193b28e7e515bf46185c7","_id":"@applaud/sass-loader@1.0.0","_nodeVersion":"10.23.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Jq0CodeflEbhcIiDxtXcjOU7loxjo77lfipfl2VPkVFG0wvkj9EZcT5fZjSL6VWuw2T8iQGJ7NRHxVPT3DgFBw==","shasum":"4998e79716fb88e063b85e65c2d043f9834166b6","tarball":"https://registry.npmjs.org/@applaud/sass-loader/-/sass-loader-1.0.0.tgz","fileCount":11,"unpackedSize":54069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2iqmXcg064MO9yhbn/YBNbPnB49TfmSon7KL/46fFrgIgKGCMSFGKucx8bs+tzpH7u38kfdnyHos/ctE+jB3c5ws="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjezpdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE0A//TX2FBoXAiVUHHNn5eigQ/UYP2vy6n/eskDIlUvNB1nGezTeh\r\nfiW4qYF/B33WVtKZN3fJrELKLkgGhdX4gJ1ZrFA25quGJF8/icDMYKdw1E+S\r\nAm2duVlMr1AmK+AmmCaqWCnk0aMKfNVu51QHoktesoii43MqkPfjNrMF5iWv\r\np3KdNaPzbjUmIOvGotPO6HfbqoF1IqzDMTWZj1k3xJHkTvohKdYrEKiz/YYx\r\nwBEBuOdWDa3HvN5E69UwbCPoUjlQl+369G1L12OYM+tySoSdGp2ACmLFKvNa\r\nR/3+SoFy77+tOxL6vNk+oTYJQIxLgibAsHUs51JBkcM+FOAy3+HmZz9CJoUt\r\nP9W4VmlhRP6yEu4OQAw3jbbzQqfkmuxhUXK8J/DW5PvU0rZX7SPW/1AEwLMW\r\nK+IWwdXHEw6412NpFrY1OMWWOCa+B8S2C+u0k6aVPfXx9V9eeGLwN4fSTBdd\r\nHMI51woJYIoYwoEF/Uxq5amnSI8ZFqvqc9PdXVFmrhR3cF8625lr0iZ72vvk\r\nEK/deZ3DooMF3V39th4d9A8ZWqZOCin6K3r+Hl+qYaMq4aZk4JpGGpr0sGeZ\r\nx0E80j3/2ST2Xzv4nw4Rv+ly1JbZmK03hvl4NvGoaV4e6JNay4wuvciNq40K\r\nbe/H0nassL5W7xwMFfoGJiseQLb0vriVBeQ=\r\n=41au\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"},"directories":{},"maintainers":[{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sass-loader_1.0.0_1669020253107_0.08943665818231317"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-21T08:44:12.996Z","1.0.0":"2022-11-21T08:44:13.319Z","modified":"2022-11-21T08:44:13.603Z"},"maintainers":[{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"}],"description":"Sass loader for webpack","homepage":"https://github.com/Applaud-devpack/sass-loader","keywords":["sass","libsass","webpack","loader","applaud"],"repository":{"type":"git","url":"git+https://github.com/Applaud-devpack/sass-loader.git"},"author":{"name":"Applaud"},"bugs":{"url":"https://github.com/Applaud-devpack/sass-loader/issues"},"license":"MIT","readme":"<div align=\"center\">\n  <img height=\"100\"\n    src=\"https://worldvectorlogo.com/logos/sass-1.svg\">\n  <a href=\"https://github.com/webpack/webpack\">\n    <img width=\"200\" height=\"200\"\n      src=\"https://webpack.js.org/assets/icon-square-big.svg\">\n  </a>\n</div>\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![deps][deps]][deps-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![chat][chat]][chat-url]\n[![size][size]][size-url]\n\n# @applaud/sass-loader\n\nLoads a Sass/SCSS file and compiles it to CSS.\n\n## Getting Started\n\nTo begin, you'll need to install `sass-loader`:\n\n```console\nnpm install @applaud/sass-loader node-sass @applaud/webpack --save-dev\n```\n\nThe sass-loader requires you to install either [Node Sass](https://github.com/sass/node-sass) or [Dart Sass](https://github.com/sass/dart-sass) on your own (more documentation you can find below).\nThis allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.\n\n- [node sass](https://github.com/sass/node-sass)\n- [dart sass](http://sass-lang.com/dart-sass)\n\nChain the sass-loader with the [css-loader](https://github.com/webpack-contrib/css-loader) and the [style-loader](https://github.com/webpack-contrib/style-loader) to immediately apply all styles to the DOM or the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract it into a separate file.\n\nThen add the loader to your `webpack` config. For example:\n\n**file.js**\n\n```js\nimport style from './style.scss';\n```\n\n**file.scss**\n\n```scss\n$body-color: red;\n\nbody {\n  color: $body-color;\n}\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          // Creates `style` nodes from JS strings\n          'style-loader',\n          // Translates CSS into CommonJS\n          'css-loader',\n          // Compiles Sass to CSS\n          'sass-loader',\n        ],\n      },\n    ],\n  },\n};\n```\n\nAnd run `webpack` via your preferred method.\n\n### Resolving `import` at-rules\n\nThe webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/).\n\nThe sass-loader uses Sass's custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from `node_modules`. Just prepend them with a `~` to tell webpack that this is not a relative import:\n\n```css\n@import '~bootstrap';\n```\n\nIt's important to only prepend it with `~`, because `~/` resolves to the home directory.\nThe webpack needs to distinguish between `bootstrap` and `~bootstrap` because CSS and Sass files have no special syntax for importing relative files.\nWriting `@import \"file\"` is the same as `@import \"./file\";`\n\n### Problems with `url(...)`\n\nSince sass implementations don't provide [url rewriting](https://github.com/sass/libsass/issues/532), all linked assets must be relative to the output.\n\n- If you pass the generated CSS on to the css-loader, all urls must be relative to the entry-file (e.g. `main.scss`).\n- If you're just generating CSS without passing it to the css-loader, it must be relative to your web root.\n\nYou will be disrupted by this first issue. It is natural to expect relative references to be resolved against the `.sass`/`.scss` file in which they are specified (like in regular `.css` files).\n\nThankfully there are a two solutions to this problem:\n\n- Add the missing url rewriting using the [resolve-url-loader](https://github.com/bholloway/resolve-url-loader). Place it before the sass-loader in the loader chain.\n- Library authors usually provide a variable to modify the asset path. [bootstrap-sass](https://github.com/twbs/bootstrap-sass) for example has an `$icon-font-path`.\n\n## Options\n\nBy default all options passed to loader also passed to to [Node Sass](https://github.com/sass/node-sass) or [Dart Sass](http://sass-lang.com/dart-sass)\n\n> ℹ️ The `indentedSyntax` option has `true` value for the `sass` extension.\n> ℹ️ Options such as `file` and `outFile` are unavailable.\n> ℹ️ Only the \"expanded\" and \"compressed\" values of outputStyle are supported for `dart-sass`.\n> ℹ We recommend don't use `sourceMapContents`, `sourceMapEmbed`, `sourceMapRoot` options because loader automatically setup this options.\n\nThere is a slight difference between the `node-sass` and `sass` options. We recommend look documentation before used them:\n\n- [the Node Sass documentation](https://github.com/sass/node-sass/#options) for all available `node-sass` options.\n- [the Dart Sass documentation](https://github.com/sass/dart-sass#javascript-api) for all available `sass` options.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'sass-loader',\n            options: {\n              indentWidth: 4,\n              includePaths: ['absolute/path/a', 'absolute/path/b'],\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `implementation`\n\nThe special `implementation` option determines which implementation of Sass to use.\n\nBy default the loader resolve the implementation based on your dependencies.\nJust add required implementation to `package.json` (`node-sass` or `sass` package) and install dependencies.\n\nExample where the `sass-loader` loader uses the `sass` (`dart-sass`) implementation:\n\n**package.json**\n\n```json\n{\n  \"devDependencies\": {\n    \"sass-loader\": \"^7.2.0\",\n    \"sass\": \"^1.22.10\"\n  }\n}\n```\n\nExample where the `sass-loader` loader uses the `node-sass` implementation:\n\n**package.json**\n\n```json\n{\n  \"devDependencies\": {\n    \"sass-loader\": \"^7.2.0\",\n    \"node-sass\": \"^4.0.0\"\n  }\n}\n```\n\nBeware the situation when `node-sass` and `sass` was installed, by default the `sass-loader` prefers `node-sass`, to avoid this situation use the `implementation` option.\n\nIt takes either `node-sass` or `sass` (`Dart Sass`) module.\n\nFor example, to use Dart Sass, you'd pass:\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'sass-loader',\n            options: {\n              // Prefer `dart-sass`\n              implementation: require('sass'),\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nNote that when using `sass` (`Dart Sass`), **synchronous compilation is twice as fast as asynchronous compilation** by default, due to the overhead of asynchronous callbacks.\nTo avoid this overhead, you can use the [fibers](https://www.npmjs.com/package/fibers) package to call asynchronous importers from the synchronous code path.\n\nTo enable this, pass the `Fiber` class to the `fiber` option:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'sass-loader',\n            options: {\n              implementation: require('sass'),\n              fiber: require('fibers'),\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `data`\n\nType: `String|Function`\nDefault: `undefined`\n\nPrepends `Sass`/`SCSS` code before the actual entry file.\nIn this case, the `sass-loader` will not override the `data` option but just append the entry's content.\n\nThis is especially useful when some of your Sass variables depend on the environment:\n\n> ℹ Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this, like multiple Sass entry files.\n\n#### `String`\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'sass-loader',\n            options: {\n              data: '$env: ' + process.env.NODE_ENV + ';',\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### `Function`\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'sass-loader',\n            options: {\n              data: (loaderContext) => {\n                // More information about avalaible options https://webpack.js.org/api/loaders/\n                const { resourcePath, rootContext } = loaderContext;\n                const relativePath = path.relative(rootContext, resourcePath);\n\n                if (relativePath === 'styles/foo.scss') {\n                  return '$value: 100px;';\n                }\n\n                return '$value: 200px;';\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `sourceMap`\n\nType: `Boolean`\nDefault: `false`\n\nEnables/Disables generation of source maps.\n\nThey are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not).\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          'style-loader',\n          {\n            loader: 'css-loader',\n            options: {\n              sourceMap: true,\n            },\n          },\n          {\n            loader: 'sass-loader',\n            options: {\n              sourceMap: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n> ℹ In some rare case `node-sass` can output invalid source maps (it is `node-sass` bug), to avoid try to update node-sass to latest version or you can try to set the `outputStyle` option to `compressed` value.\n\n### `webpackImporter`\n\nType: `Boolean`\nDefault: `true`\n\nAllows to disable default `webpack` importer.\n\nThis can improve performance in some cases. Use it with caution because aliases and `@import` at-rules starts with `~` will not work, but you can pass own `importer` to solve this (see [`importer docs`](https://github.com/sass/node-sass#importer--v200---experimental)).\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'sass-loader',\n            options: {\n              webpackImporter: false,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Examples\n\n### Extracts CSS into separate files\n\nFor production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.\n\nThere are two possibilities to extract a style sheet from the bundle:\n\n- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) (use this, when using webpack 4 configuration. Works in all use-cases)\n- [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)\n\n**webpack.config.js**\n\n```js\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          // fallback to style-loader in development\n          process.env.NODE_ENV !== 'production'\n            ? 'style-loader'\n            : MiniCssExtractPlugin.loader,\n          'css-loader',\n          'sass-loader',\n        ],\n      },\n    ],\n  },\n  plugins: [\n    new MiniCssExtractPlugin({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css',\n    }),\n  ],\n};\n```\n\n### Source maps\n\nTo enable CSS source maps, you'll need to pass the `sourceMap` option to the sass-loader _and_ the css-loader.\n\n**webpack.config.js**\n\n```javascript\nmodule.exports = {\n  devtool: 'source-map', // any \"source-map\"-like devtool is possible\n  module: {\n    rules: [\n      {\n        test: /\\.scss$/,\n        use: [\n          'style-loader',\n          {\n            loader: 'css-loader',\n            options: {\n              sourceMap: true,\n            },\n          },\n          {\n            loader: 'sass-loader',\n            options: {\n              sourceMap: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nIf you want to edit the original Sass files inside Chrome, [there's a good blog post](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0). Checkout [test/sourceMap](https://github.com/webpack-contrib/sass-loader/tree/master/test) for a running example.\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/sass-loader.svg\n[npm-url]: https://npmjs.com/package/sass-loader\n[node]: https://img.shields.io/node/v/sass-loader.svg\n[node-url]: https://nodejs.org\n[deps]: https://david-dm.org/webpack-contrib/sass-loader.svg\n[deps-url]: https://david-dm.org/webpack-contrib/sass-loader\n[tests]: https://dev.azure.com/webpack-contrib/sass-loader/_apis/build/status/webpack-contrib.sass-loader?branchName=master\n[tests-url]: https://dev.azure.com/webpack-contrib/sass-loader/_build/latest?definitionId=21&branchName=master\n[cover]: https://codecov.io/gh/webpack-contrib/sass-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/sass-loader\n[chat]: https://badges.gitter.im/webpack/webpack.svg\n[chat-url]: https://gitter.im/webpack/webpack\n[size]: https://packagephobia.now.sh/badge?p=css-loader\n[size-url]: https://packagephobia.now.sh/result?p=css-loader\n","readmeFilename":"README.md"}