系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》

在 Magento 2 中添加自定义 CSS 预处理器可以帮助您更高效地管理和开发样式表。以下是使用自定义 CSS 预处理器的代码示例：

创建自定义 CSS 预处理器

在 Magento 2 根目录中创建一个名为 app/design/frontend/<Vendor>/<Theme>/web/css/source/_custom.less 的文件，并添加以下代码：

@primary-color: #007bff;
body {
  background-color: #f8f8f8;
  color: #333;
}
h1, h2, h3 {
  color: @primary-color;
}

这个代码定义了一个名为 @primary-color 的 LESS 变量，并在样式表中使用它来设置标题的颜色。

配置 Magento 2

在 Magento 2 根目录中打开 app/design/frontend/<Vendor>/<Theme>/requirejs-config.js 文件，并添加以下代码：

var config = {
  map: {
    '*': {
      custom: 'js/custom',
      less: 'js/less'
    }
  },
  paths: {
    less: 'js/less',
    lessc: 'js/lessc.min',
    lessOpts: 'js/lessOpts'
  },
  shim: {
    lessc: {
      exports: 'less'
    },
    lessOpts: {
      deps: ['lessc']
    }
  },
  config: {
    mixins: {
      'mage/apply/main': {
        'js/apply-mixin': true
      }
    }
  }
};

这个代码将 less 和 lessc 库添加到 Magento 2 的 JavaScript 依赖项中，并配置了 apply-mixin。

创建 LESS 编译器

在 Magento 2 根目录中创建一个名为 app/design/frontend/<Vendor>/<Theme>/web/js/less.js 的文件，并添加以下代码：

define([
  'jquery',
  'lessc',
  'lessOpts'
], function($, lessc, lessOpts) {
  'use strict';
  $.widget('custom.less', {
    options: {
      lessUrl: '/<Vendor>/<Theme>/en_US/css/custom.less'
    },
    _create: function() {
      var self = this;
      var lessUrl = this.options.lessUrl;
      $.ajax({
        url: lessUrl,
        dataType: 'text',
        success: function(data) {
          lessc.render(data, lessOpts, function(css) {
            $('head').append('<style>' + css + '</style>');
          });
        }
      });
    }
  });
  return $.custom.less;
});

这个代码定义了一个名为 less 的 JavaScript 模块，并使用它来加载、编译和注入自定义 LESS 样式表。

添加 apply-mixin

在 Magento 2 根目录中创建一个名为 app/design/frontend/<Vendor>/<Theme>/web/js/apply-mixin.js 的文件，并添加以下代码：

define([
  'jquery',
  'mage/apply/main'
], function($, mageApply) {
  'use strict';
  return function(target) {
    $.widget('mage.apply', target, {
      _loadFiles: function(files, callback) {
      var lessFile = files.filter(function(file) {
      return file.indexOf('custom.less') !== -1;
    })[0];
    if (lessFile) {
      require(['less'], function(less) {
        require(['lessOpts'], function(lessOpts) {
          less.render('@import "' + lessFile + '";', lessOpts, function(css) {
            $('head').append('<style>' + css.css + '</style>');
            callback(files);
          });
        });
      });
    } else {
      this._super(files, callback);
    }
  }
});
return target;
};
});

这个代码添加了一个名为 `apply-mixin` 的 Magento 2 mixins，并使用它来加载、编译和注入自定义 LESS 样式表。

5. 保存文件并清除缓存

保存文件后，需要清除 Magento 2 的缓存，以便应用更改。可以通过在命令行中运行以下命令来清除缓存：

php bin/magento cache:clean

Copy code

现在，您可以使用自定义 CSS 预处理器来开发 Magento 2 主题。