Skip to content

Commit

Permalink
update less-loader
Browse files Browse the repository at this point in the history
  • Loading branch information
@dear-lizhihua
dear-lizhihua committed Feb 6, 2017
1 parent 577d49a commit 500ca83
Show file tree
Hide file tree
Showing 2 changed files with 281 additions and 0 deletions.
93 changes: 93 additions & 0 deletions generated/loaders/less-loader.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
{
"id": 4192593,
"name": "less-loader",
"full_name": "webpack-contrib/less-loader",
"owner": {
"login": "webpack-contrib",
"id": 25012217,
"avatar_url": "https://avatars.githubusercontent.com/u/25012217?v=3",
"gravatar_id": "",
"url": "https://api.github.com/users/webpack-contrib",
"html_url": "https://github.com/webpack-contrib",
"followers_url": "https://api.github.com/users/webpack-contrib/followers",
"following_url": "https://api.github.com/users/webpack-contrib/following{/other_user}",
"gists_url": "https://api.github.com/users/webpack-contrib/gists{/gist_id}",
"starred_url": "https://api.github.com/users/webpack-contrib/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/webpack-contrib/subscriptions",
"organizations_url": "https://api.github.com/users/webpack-contrib/orgs",
"repos_url": "https://api.github.com/users/webpack-contrib/repos",
"events_url": "https://api.github.com/users/webpack-contrib/events{/privacy}",
"received_events_url": "https://api.github.com/users/webpack-contrib/received_events",
"type": "Organization",
"site_admin": false
},
"private": false,
"html_url": "https://github.com/webpack-contrib/less-loader",
"description": "less loader module for webpack",
"fork": false,
"url": "https://api.github.com/repos/webpack-contrib/less-loader",
"forks_url": "https://api.github.com/repos/webpack-contrib/less-loader/forks",
"keys_url": "https://api.github.com/repos/webpack-contrib/less-loader/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/webpack-contrib/less-loader/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/webpack-contrib/less-loader/teams",
"hooks_url": "https://api.github.com/repos/webpack-contrib/less-loader/hooks",
"issue_events_url": "https://api.github.com/repos/webpack-contrib/less-loader/issues/events{/number}",
"events_url": "https://api.github.com/repos/webpack-contrib/less-loader/events",
"assignees_url": "https://api.github.com/repos/webpack-contrib/less-loader/assignees{/user}",
"branches_url": "https://api.github.com/repos/webpack-contrib/less-loader/branches{/branch}",
"tags_url": "https://api.github.com/repos/webpack-contrib/less-loader/tags",
"blobs_url": "https://api.github.com/repos/webpack-contrib/less-loader/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/webpack-contrib/less-loader/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/webpack-contrib/less-loader/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/webpack-contrib/less-loader/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/webpack-contrib/less-loader/statuses/{sha}",
"languages_url": "https://api.github.com/repos/webpack-contrib/less-loader/languages",
"stargazers_url": "https://api.github.com/repos/webpack-contrib/less-loader/stargazers",
"contributors_url": "https://api.github.com/repos/webpack-contrib/less-loader/contributors",
"subscribers_url": "https://api.github.com/repos/webpack-contrib/less-loader/subscribers",
"subscription_url": "https://api.github.com/repos/webpack-contrib/less-loader/subscription",
"commits_url": "https://api.github.com/repos/webpack-contrib/less-loader/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/webpack-contrib/less-loader/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/webpack-contrib/less-loader/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/webpack-contrib/less-loader/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/webpack-contrib/less-loader/contents/{+path}",
"compare_url": "https://api.github.com/repos/webpack-contrib/less-loader/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/webpack-contrib/less-loader/merges",
"archive_url": "https://api.github.com/repos/webpack-contrib/less-loader/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/webpack-contrib/less-loader/downloads",
"issues_url": "https://api.github.com/repos/webpack-contrib/less-loader/issues{/number}",
"pulls_url": "https://api.github.com/repos/webpack-contrib/less-loader/pulls{/number}",
"milestones_url": "https://api.github.com/repos/webpack-contrib/less-loader/milestones{/number}",
"notifications_url": "https://api.github.com/repos/webpack-contrib/less-loader/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/webpack-contrib/less-loader/labels{/name}",
"releases_url": "https://api.github.com/repos/webpack-contrib/less-loader/releases{/id}",
"deployments_url": "https://api.github.com/repos/webpack-contrib/less-loader/deployments",
"created_at": "2012-05-01T13:42:53Z",
"updated_at": "2017-02-05T23:15:37Z",
"pushed_at": "2017-01-31T10:23:22Z",
"git_url": "git://github.com/webpack-contrib/less-loader.git",
"ssh_url": "[email protected]:webpack-contrib/less-loader.git",
"clone_url": "https://github.com/webpack-contrib/less-loader.git",
"svn_url": "https://github.com/webpack-contrib/less-loader",
"homepage": null,
"size": 414,
"stargazers_count": 283,
"watchers_count": 283,
"language": "CSS",
"has_issues": true,
"has_downloads": true,
"has_wiki": true,
"has_pages": false,
"forks_count": 76,
"mirror_url": null,
"open_issues_count": 77,
"forks": 76,
"open_issues": 77,
"watchers": 283,
"default_branch": "master",
"permissions": {
"admin": false,
"push": false,
"pull": true
}
}
188 changes: 188 additions & 0 deletions generated/loaders/less-loader.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
---
title: less-loader
source: https://raw.githubusercontent.com/webpack-contrib/less-loader/master/README.md
edit: https://github.com/webpack-contrib/less-loader/edit/master/README.md
---
## Install

```bash
npm install --save-dev less-loader less
```

## Usage

Use [`less-loader`](https://github.com/webpack/less-loader) in tandem with [css-loader](https://github.com/webpack/css-loader) & [style-loader](https://github.com/webpack/style-loader) to add LESS support for webpack.

Use the loader either via your webpack config, CLI or inline.

### Via webpack config (recommended)

**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'less-loader'
]
}
]
}
}
```

**In your application**
```js
import css from 'file.less';
```

### CLI

```bash
webpack --module-bind 'less=style-loader!css-loader!less-loader'
```

**In your application**
```js
import css from 'file.less';
```

### Inline

**In your application**
```js
import css from 'style-loader!css-loader!less-loader!./file.less';
```

## Options

You can pass any LESS specific options to less-loader via loader options or query parameters.

See the [LESS documentation](http://lesscss.org/usage/#command-line-usage-options) for all available options. LESS translates dash-case to camelCase. Certain options which take values (e.g. `lessc --modify-var="a=b"`) are better handled with the [JSON Syntax](http://webpack.github.io/docs/using-loaders.html#query-parameters)

```js
{
test: /\.less$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'less-loader', options: { strictMath: true, noIeCompat: true } }
]
}
```

### Plugins

In order to use [plugins](http://lesscss.org/usage/#plugins), simply set
the `options.lessPlugins`-option on your `webpack.config.js`.

```js
const CleanCSSPlugin = require('less-plugin-clean-css');

{
test: /\.less$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{
loader: 'less-loader',
options: { lessPlugins: [ new CleanCSSPlugin({ advanced: true }) ] }
}
}
```

### Imports

webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/configuration/resolve/). The less-loader stubs less' `fileLoader` and passes all queries to the webpack resolving engine. Thus you can import your less-modules from `node_modules`. Just prepend them with a `~` which tells webpack to look-up the [`modules`](https://webpack.js.org/configuration/resolve/#resolve-modules)

```css
@import "~bootstrap/less/bootstrap";
```

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 less-files have no special syntax for importing relative files. Writing `@import "file"` is the same as `@import "./file";`

Also please note that for [CSS modules](https://github.com/css-modules/css-modules), relative file paths do not work as expected. Please see [this issue for the explanation](https://github.com/webpack/less-loader/issues/109#issuecomment-253797335).

### Sourcemaps

Because of browser limitations, sourcemaps are only available in conjunction with the [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin). Use that plugin to extract the CSS code from the generated JS bundle into a separate file (which improves performance because JS and CSS are loaded in parallel).

**webpack.config.js**
```js
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
// must be 'source-map' or 'inline-source-map'
devtool: 'source-map',
module: {
rules: [
{
test: /\.less$/,
use: ExtractTextPlugin.extract(
fallbackLoader: 'style-loader',
loaders: [
// activate source maps via loader query
{
loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 }
},
{
loader: 'less-loader',
options: { sourceMap: true }
}
]
)
}
]
},
plugins: [
// extract CSS into separate file
new ExtractTextPlugin('app.bundle.css')
]
}
```

If you want to view the original LESS files inside Chrome and even edit it, [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/less-loader/tree/master/test) for a running example. Make sure to serve the content with an HTTP server.

## Contributing

Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling `npm test`.

The tests are basically just comparing the generated css with a reference css-file located under `test/css`. You can easily generate a reference css-file by calling `node test/helpers/generateCss.js <less-file-without-less-extension>`. It passes the less-file to less and writes the output to the `test/css`-folder.

## Maintainer

<table>
<tbody>
<tr>
<td align="center">
<img width="150 height="150" src="https://github.com/jhnns.png?s=150">
<br>
<a href="https://github.com/jhnns">Johannes Ewald</a>
</td>
<tr>
<tbody>
</table>


[npm]: https://img.shields.io/npm/v/less-loader.svg
[npm-url]: https://npmjs.com/package/less-loader

[node]: https://img.shields.io/node/v/less-loader.svg
[node-url]: https://nodejs.org

[deps]: https://david-dm.org/webpack/less-loader.svg
[deps-url]: https://david-dm.org/webpack/less-loader

[tests]: http://img.shields.io/travis/webpack/less-loader.svg
[tests-url]: https://travis-ci.org/webpack/less-loader

[cover]: https://coveralls.io/repos/github/webpack/less-loader/badge.svg
[cover-url]: https://coveralls.io/github/webpack/less-loader

[chat]: https://badges.gitter.im/webpack/webpack.svg
[chat-url]: https://gitter.im/webpack/webpack

0 comments on commit 500ca83

Please sign in to comment.