Skip to content

Commit 5139fee

Browse files
authored
Merge pull request #402 from webpack-contrib/maintenance
Maintenance
2 parents dcc432d + 9060e5b commit 5139fee

File tree

6 files changed

+86
-27
lines changed

6 files changed

+86
-27
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@ npm-debug.log
1616
coverage
1717
.idea
1818
.nyc_output
19+
test/output

.nycrc

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"reporter": [
3+
"lcov",
4+
"text"
5+
],
6+
"include": [
7+
"lib/**/*.js"
8+
],
9+
"lines": 97,
10+
"statements": 91,
11+
"functions": 100,
12+
"branches": 89,
13+
"check-coverage": true
14+
}

README.md

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
[![npm-version][npm-version]][npm-url]
1+
[![npm][npm]][npm-url]
2+
[![node][node]][node-url]
23
[![npm-stats][npm-stats]][npm-url]
34
[![deps][deps]][deps-url]
45
[![travis][travis]][travis-url]
5-
[![coverage][coverage]][coverage-url]
6+
[![appveyor][appveyor]][appveyor-url]
7+
[![coverage][cover]][cover-url]
8+
[![chat][chat]][chat-url]
69

710
<div align="center">
811
<img height="100"
@@ -120,20 +123,6 @@ webpack provides an [advanced mechanism to resolve files](http://webpack.github.
120123

121124
It'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";`
122125

123-
### Environment variables
124-
125-
If you want to prepend Sass code before the actual entry file, you can simply 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:
126-
127-
```javascript
128-
{
129-
loader: "sass-loader",
130-
options: {
131-
data: "$env: " + process.env.NODE_ENV + ";"
132-
}
133-
}
134-
```
135-
136-
137126
### Problems with `url(...)`
138127

139128
Since 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.
@@ -146,11 +135,11 @@ More likely you will be disrupted by this second issue. It is natural to expect
146135
- 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.
147136
- 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).
148137

149-
### Extracting stylesheets
138+
### Extracting style sheets
150139

151-
Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or [hot module replacement](http://webpack.github.io/docs/hot-module-replacement-with-webpack.html) in development. In production, on the other hand, it's not a good idea to apply your stylesheets 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.
140+
Bundling 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.
152141

153-
There are two possibilties to extract a stylesheet from the bundle:
142+
There are two possibilities to extract a style sheet from the bundle:
154143

155144
- [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)
156145
- [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) (more complex, but works in all use-cases)
@@ -184,6 +173,20 @@ module.exports = {
184173

185174
If 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.
186175

176+
### Environment variables
177+
178+
If 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:
179+
180+
```javascript
181+
{
182+
loader: "sass-loader",
183+
options: {
184+
data: "$env: " + process.env.NODE_ENV + ";"
185+
}
186+
}
187+
```
188+
189+
***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.**
187190

188191
## Maintainers
189192

@@ -214,15 +217,24 @@ If you want to edit the original Sass files inside Chrome, [there's a good blog
214217

215218
[MIT](http://www.opensource.org/licenses/mit-license.php)
216219

217-
[npm-version]: https://img.shields.io/npm/v/sass-loader.svg
220+
[npm]: https://img.shields.io/npm/v/sass-loader.svg
218221
[npm-stats]: https://img.shields.io/npm/dm/sass-loader.svg
219222
[npm-url]: https://npmjs.com/package/sass-loader
220223

224+
[node]: https://img.shields.io/node/v/sass-loader.svg
225+
[node-url]: https://nodejs.org
226+
221227
[deps]: https://david-dm.org/webpack-contrib/sass-loader.svg
222228
[deps-url]: https://david-dm.org/webpack-contrib/sass-loader
223229

224230
[travis]: http://img.shields.io/travis/webpack-contrib/sass-loader.svg
225231
[travis-url]: https://travis-ci.org/webpack-contrib/sass-loader
226232

227-
[coverage]: https://img.shields.io/coveralls/webpack-contrib/sass-loader.svg
228-
[coverage-url]: https://coveralls.io/r/webpack-contrib/sass-loader?branch=master
233+
[appveyor-url]: https://ci.appveyor.com/project/jhnns/sass-loader/branch/master
234+
[appveyor]: https://ci.appveyor.com/api/projects/status/github/webpack-contrib/sass-loader?svg=true
235+
236+
[cover]: https://coveralls.io/repos/github/webpack-contrib/sass-loader/badge.svg
237+
[cover-url]: https://coveralls.io/github/webpack-contrib/sass-loader
238+
239+
[chat]: https://badges.gitter.im/webpack-contrib/webpack.svg
240+
[chat-url]: https://gitter.im/webpack-contrib/webpack

appveyor.yml

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# appveyor file
2+
# http://www.appveyor.com/docs/appveyor-yml
3+
4+
init:
5+
- git config --global core.autocrlf input
6+
7+
# what combinations to test
8+
environment:
9+
matrix:
10+
- nodejs_version: 7
11+
job_part: test
12+
- nodejs_version: 6
13+
job_part: test
14+
- nodejs_version: 4
15+
job_part: test
16+
17+
install:
18+
- ps: Install-Product node $env:nodejs_version x64
19+
- npm install
20+
21+
build: off
22+
23+
matrix:
24+
fast_finish: true
25+
26+
test_script:
27+
- node --version
28+
- npm --version
29+
- cmd: npm run appveyor:%job_part%

package.json

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@
55
"main": "lib/loader.js",
66
"scripts": {
77
"create-spec": "node test/tools/runCreateSpec.js",
8-
"pretest": "node test/tools/runCreateSpec.js",
9-
"test": "mocha -R spec -t 10000",
10-
"posttest": "eslint --fix lib test",
8+
"pretest": "npm run create-spec",
9+
"test": "nyc --all mocha -R spec -t 10000",
10+
"posttest": "npm run lint",
1111
"test-bootstrap-sass": "webpack-dev-server --config test/bootstrapSass/webpack.config.js --content-base ./test/bootstrapSass",
1212
"test-source-map": "webpack-dev-server --config test/sourceMap/webpack.config.js --content-base ./test/sourceMap --inline",
1313
"test-watch": "webpack --config test/watch/webpack.config.js",
1414
"test-extract-text": "webpack --config test/extractText/webpack.config.js",
1515
"test-hmr": "webpack-dev-server --config test/hmr/webpack.config.js --content-base ./test/hmr --hot --inline",
16-
"coverage": "nyc --reporter=lcov npm test"
16+
"lint": "eslint --ignore-path .gitignore lib test",
17+
"appveyor:test": "npm test"
1718
},
1819
"keywords": [
1920
"sass",
@@ -27,6 +28,9 @@
2728
},
2829
"author": "J. Tangelder",
2930
"license": "MIT",
31+
"engines": {
32+
"node": ">=4.0.0"
33+
},
3034
"peerDependencies": {
3135
"node-sass": "^4.0.0",
3236
"webpack": "^2.0.0"

test/output/.gitignore

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)