{
  "name": "sass-loader",
  "version": "6.0.7",
  "description": "Sass loader for webpack",
  "author": {
    "name": "J. Tangelder"
  },
  "license": "MIT",
  "main": "lib/loader.js",
  "files": [
    "lib"
  ],
  "scripts": {
    "appveyor:test": "npm test",
    "create-spec": "node test/tools/runCreateSpec.js",
    "lint": "eslint lib test",
    "test": "nyc --all mocha -R spec -t 10000",
    "test-bootstrap-sass": "webpack-dev-server --config test/bootstrapSass/webpack.config.js --content-base ./test/bootstrapSass",
    "test-source-map": "webpack-dev-server --config test/sourceMap/webpack.config.js --content-base ./test/sourceMap --inline",
    "test-watch": "webpack --config test/watch/webpack.config.js",
    "test-extract-text": "webpack --config test/extractText/webpack.config.js",
    "test-hmr": "webpack-dev-server --config test/hmr/webpack.config.js --content-base ./test/hmr --hot --inline",
    "travis:lint": "npm run lint",
    "travis:test": "npm run test",
    "travis:coverage": "npm run test",
    "pretest": "npm run create-spec",
    "posttest": "npm run lint",
    "release": "standard-version"
  },
  "dependencies": {
    "clone-deep": "^2.0.1",
    "loader-utils": "^1.0.1",
    "lodash.tail": "^4.1.1",
    "neo-async": "^2.5.0",
    "pify": "^3.0.0"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.5",
    "css-loader": "^0.28.4",
    "eslint": "^3.16.0",
    "eslint-config-peerigon": "^9.0.0",
    "eslint-plugin-jsdoc": "^2.4.0",
    "file-loader": "^0.11.2",
    "mocha": "^3.0.2",
    "node-sass": "^4.5.0",
    "nyc": "^11.0.2",
    "raw-loader": "^0.5.1",
    "should": "^11.2.0",
    "standard-version": "^4.2.0",
    "style-loader": "^0.18.2",
    "webpack-dev-server": "^2.4.1",
    "webpack-merge": "^4.0.0"
  },
  "engines": {
    "node": ">= 4.3 < 5.0.0 || >= 5.10"
  },
  "peerDependencies": {
    "node-sass": "^4.0.0",
    "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
  },
  "keywords": [
    "sass",
    "libsass",
    "webpack",
    "loader"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/webpack-contrib/sass-loader.git"
  },
  "bugs": {
    "url": "https://github.com/webpack-contrib/sass-loader/issues"
  },
  "homepage": "https://github.com/webpack-contrib/sass-loader",
  "readme": "[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![npm-stats][npm-stats]][npm-url]\n[![deps][deps]][deps-url]\n[![travis][travis]][travis-url]\n[![appveyor][appveyor]][appveyor-url]\n[![coverage][cover]][cover-url]\n[![chat][chat]][chat-url]\n\n<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  <h1>SASS Loader</h1>\n  <p>Loads a SASS/SCSS file and compiles it to CSS.</p>\n</div>\n\nUse the [css-loader](https://github.com/webpack-contrib/css-loader) or the [raw-loader](https://github.com/webpack-contrib/raw-loader) to turn it into a JS module and the [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract it into a separate file.\nLooking for the webpack 1 loader? Check out the [archive/webpack-1 branch](https://github.com/webpack-contrib/sass-loader/tree/archive/webpack-1).\n\n<h2 align=\"center\">Install</h2>\n\n```bash\nnpm install sass-loader node-sass webpack --save-dev\n```\n\nThe sass-loader requires [node-sass](https://github.com/sass/node-sass) and [webpack](https://github.com/webpack)\nas [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies). Thus you are able to control the versions accurately.\n\n<h2 align=\"center\">Examples</h2>\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.\n\n```bash\nnpm install style-loader css-loader --save-dev\n```\n\n```js\n// webpack.config.js\nmodule.exports = {\n\t...\n    module: {\n        rules: [{\n            test: /\\.scss$/,\n            use: [{\n                loader: \"style-loader\" // creates style nodes from JS strings\n            }, {\n                loader: \"css-loader\" // translates CSS into CommonJS\n            }, {\n                loader: \"sass-loader\" // compiles Sass to CSS\n            }]\n        }]\n    }\n};\n```\n\nYou can also pass options directly to [node-sass](https://github.com/andrew/node-sass) by specifying an `options` property like this:\n\n```js\n// webpack.config.js\nmodule.exports = {\n\t...\n    module: {\n        rules: [{\n            test: /\\.scss$/,\n            use: [{\n                loader: \"style-loader\"\n            }, {\n                loader: \"css-loader\"\n            }, {\n                loader: \"sass-loader\",\n                options: {\n                    includePaths: [\"absolute/path/a\", \"absolute/path/b\"]\n                }\n            }]\n        }]\n    }\n};\n```\n\nSee [node-sass](https://github.com/andrew/node-sass) for all available Sass options.\n\n### In production\n\nUsually, it's recommended to extract the style sheets into a dedicated file in production using the [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin). This way your styles are not dependent on JavaScript:\n\n```js\nconst ExtractTextPlugin = require(\"extract-text-webpack-plugin\");\n\nconst extractSass = new ExtractTextPlugin({\n    filename: \"[name].[contenthash].css\",\n    disable: process.env.NODE_ENV === \"development\"\n});\n\nmodule.exports = {\n\t...\n    module: {\n        rules: [{\n            test: /\\.scss$/,\n            use: extractSass.extract({\n                use: [{\n                    loader: \"css-loader\"\n                }, {\n                    loader: \"sass-loader\"\n                }],\n                // use style-loader in development\n                fallback: \"style-loader\"\n            })\n        }]\n    },\n    plugins: [\n        extractSass\n    ]\n};\n```\n\n<h2 align=\"center\">Usage</h2>\n\n### Imports\n\nwebpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/). The sass-loader uses node-sass' 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/dist/css/bootstrap\";\n```\n\nIt's important to only prepend it with `~`, because `~/` resolves to the home directory. webpack needs to distinguish between `bootstrap` and `~bootstrap` because CSS and Sass files have no special syntax for importing relative files. Writing `@import \"file\"` is the same as `@import \"./file\";`\n\n### Problems with `url(...)`\n\nSince Sass/[libsass](https://github.com/sass/libsass) does not provide [url rewriting](https://github.com/sass/libsass/issues/532), all linked assets must be relative to the output.\n\n- If you're just generating CSS without passing it to the css-loader, it must be relative to your web root.\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\nMore likely you will be disrupted by this second issue. It is natural to expect relative references to be resolved against the `.scss` file in which they are specified (like in regular `.css` files). Thankfully 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`. Check out [this working bootstrap example](https://github.com/webpack-contrib/sass-loader/tree/master/test/bootstrapSass).\n\n### Extracting style sheets\n\nBundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or [hot module replacement](https://webpack.js.org/concepts/hot-module-replacement/) in development. In production, on the other hand, it's not a good idea to apply your style sheets depending on JS execution. Rendering may be delayed or even a [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) might be visible. Thus it's often still better to have them as separate files in your final production build.\n\nThere are two possibilities to extract a style sheet from the bundle:\n\n- [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)\n- [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) (more complex, but works in all use-cases)\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. Your `webpack.config.js` should look like this:\n\n```javascript\nmodule.exports = {\n    ...\n    devtool: \"source-map\", // any \"source-map\"-like devtool is possible\n    module: {\n        rules: [{\n            test: /\\.scss$/,\n            use: [{\n                loader: \"style-loader\"\n            }, {\n                loader: \"css-loader\", options: {\n                    sourceMap: true\n                }\n            }, {\n                loader: \"sass-loader\", options: {\n                    sourceMap: true\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### Environment variables\n\nIf you want to prepend Sass code before the actual entry file, you can set the `data` option. In this case, the sass-loader will not override the `data` option but just append the entry's content. This is especially useful when some of your Sass variables depend on the environment:\n\n```javascript\n{\n    loader: \"sass-loader\",\n    options: {\n        data: \"$env: \" + process.env.NODE_ENV + \";\"\n    }\n}\n```\n\n**Please note:** 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<h2 align=\"center\">Maintainers</h2>\n\n<table>\n    <tr>\n      <td align=\"center\">\n        <a href=\"https://github.com/jhnns\"><img width=\"150\" height=\"150\" src=\"https://avatars0.githubusercontent.com/u/781746?v=3\"></a><br>\n        <a href=\"https://github.com/jhnns\">Johannes Ewald</a>\n      </td>\n      <td align=\"center\">\n        <a href=\"https://github.com/webpack-contrib\"><img width=\"150\" height=\"150\" src=\"https://avatars1.githubusercontent.com/u/1243901?v=3&s=460\"></a><br>\n        <a href=\"https://github.com/webpack-contrib\">Jorik Tangelder</a>\n      </td>\n      <td align=\"center\">\n        <a href=\"https://github.com/akiran\"><img width=\"150\" height=\"150\" src=\"https://avatars1.githubusercontent.com/u/3403295?v=3\"></a><br>\n        <a href=\"https://github.com/akiran\">Kiran</a>\n      </td>\n    <tr>\n</table>\n\n\n<h2 align=\"center\">License</h2>\n\n[MIT](http://www.opensource.org/licenses/mit-license.php)\n\n[npm]: https://img.shields.io/npm/v/sass-loader.svg\n[npm-stats]: https://img.shields.io/npm/dm/sass-loader.svg\n[npm-url]: https://npmjs.com/package/sass-loader\n\n[node]: https://img.shields.io/node/v/sass-loader.svg\n[node-url]: https://nodejs.org\n\n[deps]: https://david-dm.org/webpack-contrib/sass-loader.svg\n[deps-url]: https://david-dm.org/webpack-contrib/sass-loader\n\n[travis]: http://img.shields.io/travis/webpack-contrib/sass-loader.svg\n[travis-url]: https://travis-ci.org/webpack-contrib/sass-loader\n\n[appveyor-url]: https://ci.appveyor.com/project/webpack-contrib/sass-loader/branch/master\n[appveyor]: https://ci.appveyor.com/api/projects/status/rqpy1vaovh20ttxs/branch/master?svg=true\n\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\n[chat]: https://badges.gitter.im/webpack/webpack.svg\n[chat-url]: https://gitter.im/webpack/webpack\n",
  "readmeFilename": "README.md",
  "_id": "sass-loader@6.0.7",
  "dist": {
    "shasum": "f69e8b6f0a77a6cf0eee6984f4434968590122ad"
  },
  "_from": "sass-loader@^6.0.6",
  "_resolved": "http://registry.npmjs.org/sass-loader/-/sass-loader-6.0.7.tgz"
}