less-loader
[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![chat][chat]][chat-url]
处理 less 的 webpack loader。将 Less 编译为 CSS。
要求
此模块需要 Node v6.9.0+ 和 webpack v4.0.0+。
起步
你需要预先安装 less-loader：
$ npm install less-loader --save-dev
然后，修改 webpack.config.js：
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
loader: 'less-loader' // 将 Less 编译为 CSS
}]
}
};
然后，通过你偏爱的方式去运行 webpack。
The less-loader requires less as peerDependency.
Thus you are able to control the versions accurately.
示例
将 css-loader、
style-loader
和 less-loader 链式调用，
可以把所有样式立即应用于 DOM。
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'less-loader' // compiles Less to CSS
}]
}]
}
};
You can pass any Less specific options to the less-loader via loader options.
See the Less documentation
for all available options in dash-case. Since we're passing these options to
Less programmatically, you need to pass them in camelCase here:
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader', options: {
strictMath: true,
noIeCompat: true
}
}]
}]
}
};
Unfortunately, Less doesn't map all options 1-by-1 to camelCase. When in doubt, check their executable and search for the dash-case option.
In production
Usually, it's recommended to extract the style sheets into a dedicated file in production using the MiniCssExtractPlugin. This way your styles are not dependent on JavaScript.
Imports
Starting with less-loader 4, you can now choose between Less' builtin resolver
and webpack's resolver. By default, webpack's resolver is used.
webpack resolver
webpack 提供了一种
解析文件的高级机制。
less-loader 应用一个 Less 插件，并且将所有查询参数传递给 webpack resolver。
所以，你可以从 node_modules 导入你的 less 模块。
只要添加一个 ~ 前缀，
告诉 webpack 去查询 模块。
@import '~bootstrap/less/bootstrap';
重要的是只使用 ~ 前缀，因为 ~/ 会解析为主目录。
webpack 需要区分 bootstrap 和 ~bootstrap，
因为 CSS 和 Less 文件没有用于导入相对文件的特殊语法。
@import "file" 与 @import "./file"; 写法相同
Non-Less imports
使用 webpack resolver，你可以引入任何文件类型。
你只需要一个导出有效的 Less 代码的 loader。
通常，你还需要设置 issuer 条件，
以确保此规则仅适用于 Less 文件的导入：
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.js$/,
issuer: /\.less$/,
use: [{
loader: 'js-to-less-loader'
}]
}]
}
};
Less resolver
If you specify the paths option, the less-loader will not use webpack's
resolver. Modules, that can't be resolved in the local folder, will be searched
in the given paths. This is Less' default behavior. paths should be an array
with absolute paths:
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader', options: {
paths: [
path.resolve(__dirname, 'node_modules')
]
}
}]
}]
}
};
In this case, all webpack features like importing non-Less files or aliasing won't work of course.
插件
想要使用 插件，
只需像下面这样简单设置 plugins 选项：
// webpack.config.js
const CleanCSSPlugin = require('less-plugin-clean-css');
module.exports = {
...
{
loader: 'less-loader', options: {
plugins: [
new CleanCSSPlugin({ advanced: true })
]
}
}]
...
};
Extracting style sheets
Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or hot module replacement in development. In production, on the other hand, it's not a good idea to apply your style sheets depending on JS execution. Rendering may be delayed or even a FOUC might be visible. Thus it's often still better to have them as separate files in your final production build.
There are two possibilities to extract a style sheet from the bundle:
extract-loader(simpler, but specialized on the css-loader's output)- MiniCssExtractPlugin (more complex, but works in all use-cases)
source map
想要启用 CSS 的 source map，
你需要将 sourceMap 选项传递给 less-loader 和 css-loader。
所以你的 `webpack.config.js' 应该是这样：
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader', options: {
sourceMap: true
}
}, {
loader: 'less-loader', options: {
sourceMap: true
}
}]
}]
}
};
Also checkout the sourceMaps example.
如果你要在 Chrome 中编辑原始 Less 文件， 这里有一个很好的博客文章。 此博客文章是关于 Sass 的，但它也适用于 Less。
CSS modules gotcha
There is a known problem with Less and
CSS modules regarding relative
file paths in url(...) statements.
See this issue for an explanation.
贡献
如果你从未阅读过我们的贡献指南， 请在上面花点时间。