less-loader
webpack 的 Less 載入器。將 Less 編譯為 CSS。
入門
首先，您需要安裝 less 和 less-loader
npm install less less-loader --save-dev
或
yarn add -D less less-loader
或
pnpm add -D less less-loader
然後將載入器新增至您的 webpack 設定。例如
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
],
},
};並透過您偏好的方式執行 webpack。
選項
lessOptions
類型
type lessOptions = import('less').options | ((loaderContext: LoaderContext) => import('less').options})預設：{ relativeUrls: true }
您可以透過 載入器選項 中的 lessOptions 屬性，將任何 Less 特定的選項傳遞至 less-loader。請參閱 Less 文件，以取得所有可用的連字號選項。由於我們以程式方式將這些選項傳遞至 Less，因此您需要在此處以駝峰式命名法傳遞它們
object
使用物件將選項傳遞至 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,
},
},
},
],
},
],
},
};function
允許根據載入器內容設定傳遞至 Less 的選項。
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.dev.org.tw/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"],
};
},
},
},
],
},
],
},
};additionalData
類型
type additionalData =
| string
| ((content: string, loaderContext: LoaderContext) => string);預設：undefined
將 Less 程式碼新增至實際的進入檔案之前/之後。在這種情況下，less-loader 不會 覆寫來源，而只是新增進入檔案的內容。
當您的某些 Less 變數取決於環境時，這特別有用
由於您正在注入程式碼，因此這將中斷進入檔案中的來源對應。通常有比這更簡單的解決方案，例如多個 Less 進入檔案。
字串
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.dev.org.tw/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.dev.org.tw/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;
},
},
},
],
},
],
},
};sourcemap
類型
type sourceMap = boolean;預設：取決於 compiler.devtool 值
預設的原始碼地圖產生取決於 devtool 選項。除了 eval 和 false 值以外，所有值都啟用原始碼地圖產生。
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,
},
},
],
},
],
},
};webpackImporter
類型
type webpackImporter = boolean;預設：true
啟用/停用預設的 webpack 匯入器。
這在某些情況下可以提升效能。請小心使用，因為別名和 node_modules 中的 @import 將無法運作。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
webpackImporter: false,
},
},
],
},
],
},
};implementation
類型
type implementation = object | string;less-loader 相容於 Less 3 和 4 版本
特殊的 implementation 選項決定要使用哪個 Less 實作。覆寫本機安裝的 less peerDependency 版本。
此選項僅對下游工具作者真正有用，以簡化 Less 3 到 4 的轉換。
物件
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
implementation: require("less"),
},
},
],
},
],
},
};字串
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
implementation: require.resolve("less"),
},
},
],
},
],
},
};lessLogAsWarnOrErr
類型
type lessLogAsWarnOrErr = boolean;預設值：false
Less 警告和錯誤將會是 webpack 警告和錯誤，而不再只是記錄檔。
warning.less
div {
&:extend(.body1);
}
如果 lessLogAsWarnOrErr 設為 false，它將只是一個記錄檔，且 webpack 將會成功編譯，但如果你將此選項設為 true，webpack 將會因為警告而編譯失敗。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
lessLogAsWarnOrErr: true,
},
},
],
},
],
},
};範例
一般用法
將 less-loader 與 css-loader 和 style-loader 鏈結，以立即將所有樣式套用至 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
},
],
},
],
},
};很遺憾地，Less 並未將所有選項一對一對應至駝峰式大小寫。當有疑問時，查看其可執行檔 並搜尋連字號選項。
原始碼對應
若要為 CSS 啟用原始碼對應，你需要在 loader 的選項中傳遞 sourceMap 屬性。如果未傳遞此屬性，loader 將會遵循 webpack 原始碼對應的設定，設定於 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,
},
},
],
},
],
},
};如果你想在 Chrome 中編輯原始的 Less 檔案，這裡有一篇不錯的部落格文章。這篇部落格文章是關於 Sass，但它也適用於 Less。
在生產環境中
通常，建議在製作時使用 MiniCssExtractPlugin 將樣式表萃取到專屬檔案中。如此一來，您的樣式便不會依賴 JavaScript。
匯入
首先，我們嘗試使用內建的 less 解析邏輯，然後使用 webpack 解析邏輯。
Webpack 解析器
webpack 提供一個 進階機制來解析檔案。如果 less 無法解析 @import，less-loader 會套用一個 Less 外掛程式，將所有查詢傳遞給 webpack 解析器。因此，您可以從 node_modules 匯入 Less 模組。
@import "bootstrap/less/bootstrap";使用 ~ 已過時，可以從您的程式碼中移除（我們建議這麼做），但基於歷史原因，我們仍支援它。為什麼您可以移除它？載入器會先嘗試將 @import 解析為相對路徑，如果無法解析，載入器會嘗試在 node_modules 內解析 @import。
預設解析器選項可以透過 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.dev.org.tw/configuration/resolve/
less: {
mainFiles: ["custom"],
},
},
},
};Less 解析器
如果您指定 paths 選項，系統會在指定的 paths 中搜尋模組。這是 less 的預設行為。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")],
},
},
},
],
},
],
},
};外掛程式
若要使用 外掛程式，只需設定 plugins 選項，如下所示：
webpack.config.js
const CleanCSSPlugin = require('less-plugin-clean-css');
module.exports = {
...
{
loader: 'less-loader',
options: {
lessOptions: {
plugins: [
new CleanCSSPlugin({ advanced: true }),
],
},
},
},
...
};注意
可以在自訂外掛中使用
pluginManager.webpackLoaderContext屬性來存取 loader context。
module.exports = {
install: function (less, pluginManager, functions) {
functions.add("pi", function () {
// Loader context is available in `pluginManager.webpackLoaderContext`
return Math.PI;
});
},
};萃取樣式表
使用 webpack 捆綁 CSS 有許多好處，例如使用雜湊 URL 參照圖片和字型，或在開發中使用 熱模組替換。另一方面，在生產環境中，不建議讓樣式表依賴 JS 執行。這可能會延遲渲染，甚至會看到 FOUC。因此，在最終的生產版本中，通常還是將它們作為獨立檔案會比較好。
有兩種方法可以從套件中萃取樣式表
extract-loader（較簡單，但專門用於 css-loader 的輸出）MiniCssExtractPlugin（較複雜，但適用於所有用例）
CSS 模組問題
Less 和 CSS 模組 有一個已知問題，與 url(...) 陳述式中的相對檔案路徑有關。請參閱此問題以取得說明。
貢獻
如果您尚未閱讀，請花點時間閱讀我們的貢獻指南。