Skip to content

Commit

Permalink
document the feature at readme
Browse files Browse the repository at this point in the history
  • Loading branch information
bbtfr committed Mar 18, 2017
1 parent c5fbbde commit 9e05a7c
Showing 1 changed file with 40 additions and 1 deletion.
41 changes: 40 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ To be compatible with existing css files (if not in CSS Module mode):
|**`sourceMap`**|`false`|Enable/Disable Sourcemaps|
|**`camelCase`**|`false`|Export Classnames in CamelCase|
|**`importLoaders`**|`0`|Number of loaders applied before CSS loader|
|**`alias`**|`{}`|Create aliases to import certain modules more easily|

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.

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

### toString

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

**webpack.config.js**

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

### Alias

Rewrite your urls with alias, this is useful when it's hard to change url paths of your input files, for example, when you're using some css / sass files in another package (bootstrap, ratchet, font-awesome, etc.).

#### Possible Options

css-loader's `alias` follows the same syntax as webpack's `resolve.alias`, you can see the details at: https://webpack.js.org/configuration/resolve/#resolve-alias

**webpack.config.js**
```js
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
alias: {
"../fonts/bootstrap": "bootstrap-sass/assets/fonts/bootstrap"
}
}
}, {
loader: "sass-loader",
options: {
includePaths: [
path.resolve("./node_modules/bootstrap-sass/assets/stylesheets")
]
}
}]
}
```

```scss
@charset "UTF-8";
@import "bootstrap";
```
Check out this [working bootstrap example](https://github.com/bbtfr/webpack2-bootstrap-sass-sample).

<h2 align="center">Maintainers</h2>

<table>
Expand Down

0 comments on commit 9e05a7c

Please sign in to comment.