目录
Webpack 2.2 中文文档
less-loader
安装
npm install --save-dev less-loader less
用法
一起使用less-loader、css-loader和style-loader,添加对 webpack 的 LESS 支持。
通过 webpack 配置、命令行或者内联方式使用这个 loader。
通过 webpack 配置(推荐)
webpack.config.js
module.exports = { module: { rules: [ { test: /\.less$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'less-loader' ] } ] } }
在你的项目中
import css from 'file.less';
命令行方式(CLI)
webpack --module-bind 'less=style-loader!css-loader!less-loader'
在你的项目中
import css from 'file.less';
内联方式
在你的项目中
import css from 'style-loader!css-loader!less-loader!./file.less';
选项
通过 loader 的选项或者查询参数,你可以将任何 LESS 特定的选项传递给 less-loader。
有关所有可用选项,请参阅LESS 文档。LESS 把 dash-case 为 camelCase。采用值的某些选项(比如 lessc –modify-var=”a=b” ),最好使用JSON 语法处理。
{ test: /\.less$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'less-loader', options: { strictMath: true, noIeCompat: true } } ] }
插件
为了使用插件,只需在你的 webpack.config.js 文件中,简单地设置 options.lessPlugins 选项既可。
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 提供了一种高级的机制解析文件。less-loader 根除 less fileLoader,并且将所有的查询参数传递给 webpack 解析引擎。所以,你可以从 node_modules 导入你的 less 模块。只要加一个 ~ 前缀,告诉 webpack 去查询模块。
@import "~bootstrap/less/bootstrap";
只要加前缀 ~ 十分必要,因为 ~/ 解析为主目录。webpack 需要区分 bootstrap 和 ~bootstrap ,因为 css 和 less 文件对于导入相对路径的文件没有特殊语法。所以写 @import “file” 和 @import “./file”; 是一样的效果。
还要注意,对于CSS 模块,相对文件路径不会生效。请参阅此issue的解释。
Sourcemaps
因为浏览器的限制,只有结合extract-text-webpack-plugin才能使用 suorcemaps。使用这个插件,从生成的JS bundle 中提取 css 代码到一个单独的文件(这样可以提高性能,因为 JS 和 CSS 并行加载)。
webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { // 必须是 'source-map' 或者 'inline-source-map' devtool: 'source-map', module: { rules: [ { test: /\.less$/, use: ExtractTextPlugin.extract( fallbackLoader: 'style-loader', loaders: [ // 通过 loader 参数激活 source maps { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } }, { loader: 'less-loader', options: { sourceMap: true } } ] ) } ] }, plugins: [ // 提取 CSS 到单独的文件中 new ExtractTextPlugin('app.bundle.css') ] }
如果你想在Chrome浏览器中查看原始的LESS文件,甚至编辑它。有一篇很好的博客文章。查看test/sourceMap目录,获取运行例子。要确保使用HTTP服务器提供内容。
贡献
不要犹豫啦,创建一个PR。每一份奉献都是值得欣赏的。在开发中,你可以通过运行 npm test 启动测试。
测试基本上只是比较生成的 css 文件和位于 test/css 目录下的引用 css 文件。通过运行 node test/helpers/generateCss.js
维护者
Johannes Ewald
原文:https://webpack.js.org/loaders/less-loader/
上一篇: json5-loader 下一篇: mocha-loader