Compiles Less to CSS.
Use the css-loader or the raw-loader to turn it into a JS module and the ExtractTextPlugin to extract it into a separate file.
npm install --save-dev less-loader less
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.
Usually, it's recommended to extract the style sheets into a dedicated file in production using the ExtractTextPlugin. This way your styles are not dependent on JavaScript:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractLess = new ExtractTextPlugin({
filename: "[name].[contenthash].css",
disable: process.env.NODE_ENV === "development"
});
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: extractLess.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
}]
},
plugins: [
extractLess
]
};
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 提供了一种解析文件的高级机制。less-loader 应用一个 Less 插件,并且将所有查询参数传递给 webpack resolver。所以,你可以从 node_modules
导入你的 less 模块。只要加一个 ~
前缀,告诉 webpack 去查询模块
。
@import "~bootstrap/less/bootstrap";
重要的是只使用 ~
前缀,因为 ~/
会解析为主目录。webpack 需要区分bootstrap
和〜bootstrap
,因为 CSS 和 Less 文件没有用于导入相对文件的特殊语法。@import "file"
与 @import "./file";
写法相同
使用 webpack resolver,你可以引入任何文件类型。你只需要一个导出有效的 Less 代码的 loader。通常,你还需要设置 issuer
条件,以确保此规则仅适用于 Less 文件的导入:
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.js$/,
issuer: /\.less$/,
use: [{
loader: "js-to-less-loader"
}]
}]
}
};
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 })
]
}
}]
...
};
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:
要启用 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。
There is a known problem with Less and CSS modules regarding relative file paths in url(...)
statements. See this issue for an explanation.
Johannes Ewald |