diff --git a/generated/loaders/less-loader.json b/generated/loaders/less-loader.json new file mode 100644 index 000000000000..c0ca8a04a30b --- /dev/null +++ b/generated/loaders/less-loader.json @@ -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": "git@github.com: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 + } +} \ No newline at end of file diff --git a/generated/loaders/less-loader.md b/generated/loaders/less-loader.md new file mode 100644 index 000000000000..4f2ba1a70ac0 --- /dev/null +++ b/generated/loaders/less-loader.md @@ -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 `. It passes the less-file to less and writes the output to the `test/css`-folder. + +## Maintainer + + + + + + + +
+ +
+ Johannes Ewald +
+ + +[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