此包停止维护,请使用@zougt/some-loader-utils
fork 自webpack-contrib/less-loader,在less-loader
的基础上增加了multipleScopeVars
属性,用于根据多个 less 变量文件编译出多种添加了权重类名的样式(不得不修改 less-loader 的源码达到此目的)
没有添加
multipleScopeVars
属性时,@zougt/less-loader
跟less-loader
是一致的
@zougt/less-loader v7.4.0+
对应less-loader v7.3.0+
@zougt/less-loader v8.1.0+
对应less-loader v8.0.0+
$ npm install less @zougt/less-loader --save-dev
在 webpack.config.js 使用less-loader
的地方替换成@zougt/less-loader
, 并添加multipleScopeVars
属性
Type object[]
Type string
Type string | string[]
const path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
// loader: "less-loader",
loader: "@zougt/less-loader",
options: {
multipleScopeVars: [
{
scopeName: "theme-default",
path: path.resolve("src/theme/default-vars.less"),
},
{
scopeName: "theme-mauve",
path: path.resolve("src/theme/mauve-vars.less"),
},
],
},
},
],
},
};
//src/theme/default-vars.less
@primary-color: #0081ff;
//src/theme/mauve-vars.less
@primary-color: #9c26b0;
//src/components/Button/style.less
@import "../../theme/default-vars";
.un-btn {
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
border: 1px solid transparent;
background-color: @primary-color;
.anticon {
line-height: 1;
}
}
编译之后
src/components/Button/style.css
.un-btn {
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
border: 1px solid transparent;
}
.theme-default .un-btn {
background-color: #0081ff;
}
.theme-mauve .un-btn {
background-color: #9c26b0;
}
.un-btn .anticon {
line-height: 1;
}
在html
中改变 classname 切换主题,只作用于 html 标签 :
<!DOCTYPE html>
<html lang="zh" class="theme-default">
<head>
<meta charset="utf-8" />
<title>title</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
如果是模块化的 less,得到的 css 类似:
.src-components-ContentWrapper-style_theme-default-3CPvz
.src-components-ContentWrapper-style_un-btn-1n85E {
background-color: #0081ff;
}
.src-components-ContentWrapper-style_theme-mauve-3yajX
.src-components-ContentWrapper-style_un-btn-1n85E {
background-color: #9c26b0;
}
实际需要的结果应该是这样:
.theme-default .src-components-ContentWrapper-style_un-btn-1n85E {
background-color: #0081ff;
}
.theme-mauve .src-components-ContentWrapper-style_un-btn-1n85E {
background-color: #9c26b0;
}
在 webpack.config.js 需要对css-loader
(v4.0+) 的 modules 属性修改:
const path = require("path");
const { interpolateName } = require("loader-utils");
function normalizePath(file) {
return path.sep === "\\" ? file.replace(/\\/g, "/") : file;
}
const multipleScopeVars = [
{
scopeName: "theme-default",
path: path.resolve("src/theme/default-vars.less"),
},
{
scopeName: "theme-mauve",
path: path.resolve("src/theme/mauve-vars.less"),
},
];
module.exports = {
module: {
rules: [
{
test: /\.module.less$/i,
use: [
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
localIdentName:
process.env.NODE_ENV === "production"
? "[hash:base64:5]"
: "[path][name]_[local]-[hash:base64:5]",
//使用 getLocalIdent 自定义模块化名称 , css-loader v4.0+
getLocalIdent: (
loaderContext,
localIdentName,
localName,
options
) => {
if (
multipleScopeVars.some(
(item) => item.scopeName === localName
)
) {
//localName 属于 multipleScopeVars 的不用模块化
return localName;
}
const { context, hashPrefix } = options;
const { resourcePath } = loaderContext;
const request = normalizePath(
path.relative(context, resourcePath)
);
// eslint-disable-next-line no-param-reassign
options.content = `${hashPrefix + request}\x00${localName}`;
const inname = interpolateName(
loaderContext,
localIdentName,
options
);
return inname.replace(/\\?\[local\\?]/gi, localName);
},
},
},
},
{
// loader: "less-loader",
loader: "@zougt/less-loader",
options: {
multipleScopeVars,
},
},
],
},
],
},
};
A Less loader for webpack. Compiles Less to CSS.
To begin, you'll need to install less
and less-loader
:
$ npm install less less-loader --save-dev
Then add the loader to your webpack
config. For example:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
loader: "less-loader", // compiles Less to CSS
},
],
},
};
And run webpack
via your preferred method.
Name | Type | Default | Description |
---|---|---|---|
lessOptions |
{Object|Function} |
{ relativeUrls: true } |
Options for Less. |
additionalData |
{String|Function} |
undefined |
Prepends/Appends Less code to the actual entry file. |
sourceMap |
{Boolean} |
compiler.devtool |
Enables/Disables generation of source maps. |
webpackImporter |
{Boolean} |
true |
Enables/Disables the default Webpack importer. |
implementation |
{Object} |
less |
Setup Less implementation to use. |
Type: Object|Function
Default: { relativeUrls: true }
You can pass any Less specific options to the less-loader
through the lessOptions
property in the 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:
Use an object to pass options through to Less.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "less-loader",
options: {
lessOptions: {
strictMath: true,
},
},
},
],
},
],
},
};
Allows setting the options passed through to Less based off of the loader context.
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
lessOptions: (loaderContext) => {
// More information about available properties https://webpack.js.org/api/loaders/
const { resourcePath, rootContext } = loaderContext;
const relativePath = path.relative(rootContext, resourcePath);
if (relativePath === "styles/foo.less") {
return {
paths: ["absolute/path/c", "absolute/path/d"],
};
}
return {
paths: ["absolute/path/a", "absolute/path/b"],
};
},
},
},
],
},
],
},
};
Type: String|Function
Default: undefined
Prepends Less
code before the actual entry file.
In this case, the less-loader
will not override the source but just prepend the entry's content.
This is especially useful when some of your Less variables depend on the environment:
ℹ Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this, like multiple Less entry files.
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
additionalData: `@env: ${process.env.NODE_ENV};`,
},
},
],
},
],
},
};
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
additionalData: (content, loaderContext) => {
// More information about available properties https://webpack.js.org/api/loaders/
const { resourcePath, rootContext } = loaderContext;
const relativePath = path.relative(rootContext, resourcePath);
if (relativePath === "styles/foo.less") {
return "@value: 100px;" + content;
}
return "@value: 200px;" + content;
},
},
},
],
},
],
},
};
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
additionalData: async (content, loaderContext) => {
// More information about available properties https://webpack.js.org/api/loaders/
const { resourcePath, rootContext } = loaderContext;
const relativePath = path.relative(rootContext, resourcePath);
if (relativePath === "styles/foo.less") {
return "@value: 100px;" + content;
}
return "@value: 200px;" + content;
},
},
},
],
},
],
},
};
Type: Boolean
Default: depends on the compiler.devtool
value
By default generation of source maps depends on the devtool
option. All values enable source map generation except eval
and false
value.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: {
sourceMap: true,
},
},
{
loader: "less-loader",
options: {
sourceMap: true,
},
},
],
},
],
},
};
Type: Boolean
Default: true
Enables/Disables the default webpack
importer.
This can improve performance in some cases. Use it with caution because aliases and @import
at-rules starting with ~
will not work.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
webpackImporter: false,
},
},
],
},
],
},
};
Type: Object
⚠ less-loader compatible with Less 3 and 4 versions
The special implementation
option determines which implementation of Less to use. Overrides the locally installed peerDependency
version of less
.
This option is only really useful for downstream tooling authors to ease the Less 3-to-4 transition.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
implementation: require("less"),
},
},
],
},
],
},
};
Chain the less-loader
with the css-loader
and the style-loader
to immediately apply all styles to the DOM.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
{
loader: "style-loader", // creates style nodes from JS strings
},
{
loader: "css-loader", // translates CSS into CommonJS
},
{
loader: "less-loader", // compiles Less to CSS
},
],
},
],
},
};
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.
To enable sourcemaps for CSS, you'll need to pass the sourceMap
property in the loader's options. If this is not passed, the loader will respect the setting for webpack source maps, set in devtool
.
webpack.config.js
module.exports = {
devtool: "source-map", // any "source-map"-like devtool is possible
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: {
sourceMap: true,
},
},
{
loader: "less-loader",
options: {
sourceMap: true,
},
},
],
},
],
},
};
If you want to edit the original Less files inside Chrome, there's a good blog post. The blog post is about Sass but it also works for Less.
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.
First we try to use built-in less
resolve logic, then webpack
resolve logic (aliases and ~
).
webpack
provides an advanced mechanism to resolve files.
less-loader
applies a Less plugin that passes all queries to the webpack resolver if less
could not resolve @import
.
Thus you can import your Less modules from node_modules
.
@import "bootstrap/less/bootstrap";
Using ~
is deprecated and can be removed from your code (we recommend it), but we still support it for historical reasons.
Why you can removed it? The loader will first try to resolve @import
as relative, if it cannot be resolved, the loader will try to resolve @import
inside node_modules
.
Just prepend them with a ~
which tells webpack to look up the modules
.
@import "~bootstrap/less/bootstrap";
Default resolver options can be modified by resolve.byDependency
:
webpack.config.js
module.exports = {
devtool: "source-map", // any "source-map"-like devtool is possible
module: {
rules: [
{
test: /\.less$/i,
use: ["style-loader", "css-loader", "less-loader"],
},
],
},
resolve: {
byDependency: {
// More options can be found here https://webpack.js.org/configuration/resolve/
less: {
mainFiles: ["custom"],
},
},
},
};
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";
If you specify the paths
option, modules 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$/i,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "less-loader",
options: {
lessOptions: {
paths: [path.resolve(__dirname, "node_modules")],
},
},
},
],
},
],
},
};
In order to use plugins, simply set the plugins
option like this:
webpack.config.js
const CleanCSSPlugin = require('less-plugin-clean-css');
module.exports = {
...
{
loader: 'less-loader',
options: {
lessOptions: {
plugins: [
new CleanCSSPlugin({ advanced: true }),
],
},
},
},
...
};
ℹ️ Access to the loader context inside the custom plugin can be done using the
less.webpackLoaderContext
property.
module.exports = {
install: function (less, pluginManager, functions) {
functions.add("pi", function () {
// Loader context is available in `less.webpackLoaderContext`
return Math.PI;
});
},
};
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)
There is a known problem with Less and CSS modules regarding relative file paths in url(...)
statements. See this issue for an explanation.
Please take a moment to read our contributing guidelines if you haven't yet done so.