package.json
14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
{
"_args": [
[
{
"raw": "sass-loader@^6.0.3",
"scope": null,
"escapedName": "sass-loader",
"name": "sass-loader",
"rawSpec": "^6.0.3",
"spec": ">=6.0.3 <7.0.0",
"type": "range"
},
"D:\\100-Projects\\100-AIAHTML5\\400-SOURCECODE\\AIAHTML5.Admin\\node_modules\\@angular\\cli"
]
],
"_from": "sass-loader@>=6.0.3 <7.0.0",
"_id": "sass-loader@6.0.5",
"_inCache": true,
"_location": "/sass-loader",
"_nodeVersion": "7.8.0",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/sass-loader-6.0.5.tgz_1494415804052_0.05608404893428087"
},
"_npmUser": {
"name": "jhnns",
"email": "mail@johannesewald.de"
},
"_npmVersion": "4.2.0",
"_phantomChildren": {
"lodash": "4.17.4"
},
"_requested": {
"raw": "sass-loader@^6.0.3",
"scope": null,
"escapedName": "sass-loader",
"name": "sass-loader",
"rawSpec": "^6.0.3",
"spec": ">=6.0.3 <7.0.0",
"type": "range"
},
"_requiredBy": [
"/@angular/cli"
],
"_resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-6.0.5.tgz",
"_shasum": "a847910f36442aa56c5985879d54eb519e24a328",
"_shrinkwrap": null,
"_spec": "sass-loader@^6.0.3",
"_where": "D:\\100-Projects\\100-AIAHTML5\\400-SOURCECODE\\AIAHTML5.Admin\\node_modules\\@angular\\cli",
"author": {
"name": "J. Tangelder"
},
"bugs": {
"url": "https://github.com/webpack-contrib/sass-loader/issues"
},
"dependencies": {
"async": "^2.1.5",
"clone-deep": "^0.2.4",
"loader-utils": "^1.0.1",
"lodash.tail": "^4.1.1",
"pify": "^2.3.0"
},
"description": "Sass loader for webpack",
"devDependencies": {
"bootstrap-sass": "^3.3.5",
"css-loader": "^0.26.1",
"eslint": "^3.16.0",
"eslint-config-peerigon": "^9.0.0",
"eslint-plugin-jsdoc": "^2.4.0",
"file-loader": "^0.10.0",
"mocha": "^3.0.2",
"node-sass": "^4.5.0",
"nyc": "^10.1.2",
"raw-loader": "^0.5.1",
"should": "^11.2.0",
"style-loader": "^0.13.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1",
"webpack-merge": "^3.0.0"
},
"directories": {},
"dist": {
"shasum": "a847910f36442aa56c5985879d54eb519e24a328",
"tarball": "https://registry.npmjs.org/sass-loader/-/sass-loader-6.0.5.tgz"
},
"engines": {
"node": ">=4.0.0"
},
"files": [
"lib",
"README",
"LICENSE"
],
"gitHead": "c61eaee0979350e899f2e64a630ab7e8ef6033b7",
"homepage": "https://github.com/webpack-contrib/sass-loader#readme",
"keywords": [
"sass",
"libsass",
"webpack",
"loader"
],
"license": "MIT",
"main": "lib/loader.js",
"maintainers": [
{
"name": "akiran",
"email": "kiran@neostack.com"
},
{
"name": "jhnns",
"email": "mail@johannesewald.de"
},
{
"name": "jtangelder",
"email": "j.tangelder@gmail.com"
},
{
"name": "peerigon",
"email": "developers@peerigon.com"
}
],
"name": "sass-loader",
"optionalDependencies": {},
"peerDependencies": {
"node-sass": "^4.0.0",
"webpack": "^2.0.0"
},
"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 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```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 directly after 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/jhnns/sass-loader/branch/master\n[appveyor]: https://ci.appveyor.com/api/projects/status/github/webpack-contrib/sass-loader?svg=true\n\n[cover]: https://coveralls.io/repos/github/webpack-contrib/sass-loader/badge.svg\n[cover-url]: https://coveralls.io/github/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",
"repository": {
"type": "git",
"url": "git://github.com/webpack-contrib/sass-loader.git"
},
"scripts": {
"appveyor:test": "npm test",
"create-spec": "node test/tools/runCreateSpec.js",
"lint": "eslint lib test",
"posttest": "npm run lint",
"pretest": "npm run create-spec",
"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-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",
"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"
},
"version": "6.0.5"
}