Skip to content

Commit e5bc145

Browse files
committed
document the feature at readme
1 parent c5fbbde commit e5bc145

File tree

1 file changed

+40
-1
lines changed

1 file changed

+40
-1
lines changed

README.md

+40-1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ To be compatible with existing css files (if not in CSS Module mode):
8989
|**`sourceMap`**|`false`|Enable/Disable Sourcemaps|
9090
|**`camelCase`**|`false`|Export Classnames in CamelCase|
9191
|**`importLoaders`**|`0`|Number of loaders applied before CSS loader|
92+
|**`alias`**|`null`|Create aliases to import certain modules more easily|
9293

9394
The following webpack config can load CSS files, embed small PNG/JPG/GIF/SVG images as well as fonts as [Data URLs](https://tools.ietf.org/html/rfc2397) and copy larger files to the output directory.
9495

@@ -322,7 +323,7 @@ They are not enabled by default because they expose a runtime overhead and incre
322323

323324
### toString
324325

325-
You can also use the css-loader results directly as string, such as in Angular's component style.
326+
You can also use the css-loader results directly as string, such as in Angular's component style.
326327

327328
**webpack.config.js**
328329

@@ -430,6 +431,44 @@ By default, the exported JSON keys mirror the class names. If you want to cameli
430431
import { className } from 'file.css';
431432
```
432433

434+
### Alias
435+
436+
Rewrite your urls with alias, this is useful when it's hard to change url paths of your input files, for example, you're using some css / sass files in another package (bootstrap, ratchet, font-awesome, etc.).
437+
438+
#### Possible Options
439+
440+
css-loader's `alias` follows the same syntax as webpack `resolve.alias`, you can see the details at: https://webpack.js.org/configuration/resolve/#resolve-alias
441+
442+
**webpack.config.js**
443+
```js
444+
{
445+
test: /\.scss$/,
446+
use: [{
447+
loader: "style-loader"
448+
}, {
449+
loader: "css-loader",
450+
options: {
451+
alias: {
452+
"../fonts/bootstrap": "bootstrap-sass/assets/fonts/bootstrap"
453+
}
454+
}
455+
}, {
456+
loader: "sass-loader",
457+
options: {
458+
includePaths: [
459+
path.resolve("./node_modules/bootstrap-sass/assets/stylesheets")
460+
]
461+
}
462+
}]
463+
}
464+
```
465+
466+
```scss
467+
@charset "UTF-8";
468+
@import "bootstrap";
469+
```
470+
Check out this [working bootstrap example](https://github.com/bbtfr/webpack2-bootstrap-sass-sample).
471+
433472
<h2 align="center">Maintainers</h2>
434473

435474
<table>

0 commit comments

Comments
 (0)