magento2:前端如何使用grunt 编译less

最新推荐文章于 2024-04-03 08:08:48 发布

冰墩墩1

最新推荐文章于 2024-04-03 08:08:48 发布

阅读量354

点赞数

分类专栏： magento2 grunt 文章标签： less css html5

本文链接：https://blog.csdn.net/weixin_40024174/article/details/120411690

版权

magento2 同时被 2 个专栏收录

10 篇文章

订阅专栏

grunt

2 篇文章

订阅专栏

本文详细介绍了在Magento2项目中如何使用grunt来编译less文件。首先需要安装node、grunt和grunt-cli。然后替换grunt-config.js中的主题配置，创建对应主题的配置文件。运行grunt命令，包括clean、exec和less任务，最后刷新页面，浏览器中的样式将直接链接到less源文件，方便开发者调试和查找样式来源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装node
2.安装grunt
3.安装 grunt-cli
4.在项目根目录下把以下文件替换为对应文件

package.json.sample 替换为 package.json
Gruntfile.js.sample 替换为 Gruntfile.js
grunt-config.json.sample 替换为 grunt-config.json

其他文件不需要改变，只需把grunt-config.js文件中的

{
  "themes": "dev/tools/grunt/configs/local-themes"
 }

“local-themes”改为自己主题的定义的主题配置文件，eg: dev/tools/grunt/configs/orange-theme (theme为orange主题,目录为app/design/frontend/orange/rwd)

5.在dev/tools/grunt/configs/文件夹下新建 orange-theme.js文件，内容为

"use strict";

module.exports = {
  orange: {
    area: "frontend",
    name: "orange/rwd",
    locale: "en_GB",
    files: [
      "css/styles-m",
      "css/styles-l"
    ],
    dsl: "less"
  }
};

也可到dev/tools/grunt/configs/themes.js文件里看到这样的例子作为参考
6.跑grunt命令
grunt命令：

grunt clean   # Removes the theme related static files in the pub/static and var directories.
grunt exec    # Republishes symlinks to the source files to the pub/static/frontend/ directory.
grunt less    # Compiles .css files using the symlinks published in the pub/static/frontend/ directory.
grunt watch   # Tracks the changes in the source files, recompiles .css files, and reloads the page in the browser.

跑命令的顺序：
grunt clean
grunt exec:orange
grunt less:orange

之后刷新网站，浏览器F12工具栏里style的样式文件就为样式对应的less文件，再也不用为找不到哪个less文件写的而头疼或者全局搜索了哈。如以下图片
在这里插入图片描述
参考 https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css_debug.html