Magento2 使用Less扩展自定义主题中的父样式

使用Less扩展自定义主题中的父样式

要在主题中扩展父主题的样式：

1.在该路径下创建一个_extend.less文件：

│ ├── web/
│ │ ├── css/
│ │ │ ├── source/
│ │ │ ├──_extend.less

2.在此文件中添加您的LESS代码

当您对父主题具的内容感到满意仅仅想要添加样式时，使用_extend.less扩展主题是最简单的方式

使用Less覆盖自定义主题中的父样式

要覆盖父样式（即覆盖默认的Magento UI库）：

1.在主题目录中，创建web/css/source子目录

2.在该路径下创建一个_theme.less文件：

<theme_dir>/
│ ├── web/
│ │ ├── css/
│ │ │ ├── source/
│ │ │ ├──_theme.less

3.重要的是要记住你的_theme.less覆盖了父_theme.less

4.从父_theme.less复制所需的所有变量，包括那些不会更改的变量。如果您的主题继承自Blank，则应从中复制的_theme.less位于<Magento_Blank_theme_dir>/web/css/source/_theme.less

5.进行必要的更改

6.父主题可能没有_theme.less文件，这仅供参考。如果在<Magento_Blank_theme_dir>/Magento_Theme web/css/source中有一个名为_module.less的文件，则需要在类似位置<theme_dir>/Magento_Theme/web/css/source中复制主题中的相同文件，然后对此文件进行必要的更改

这种方法的缺点是，只要更新父级的_theme.less，您就需要监视并手动更新文件。

注意： 要查看您在less文件中所做的更改，您需要执行setup：upgrade and setup：static-content：deploy

少用Grunt编译

先决条件

确保将Magento设置为开发者模式或默认模式

安装和配置Grunt

Magento已经配置了内置的Grunt任务，但是仍然需要几个先决条件才能使用它：

1.将node.js安装到计算机上的任何位置，参考：https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions

2.运行以下命令，安装Grunt CLI工具：

npm install -g grunt-cli

3.现在重命名以下文件： Gruntfile.js.sample 改为 Gruntfile.js

                                        package.json.sample 改为 package.json

4.为Magento实例安装（或刷新）node.js项目依托项，包括Grunt。为此，请在命令行中运行以下命令：

cd <your_Magento_root_directory>
npm install
npm update

5.将您的主题添加到Grunt配置：在dev / tools / grunt / configs / themes.js文件中，将您的主题添加到module.exports，如下所示：

module.exports = {
     ...
    <theme>: {
    area: 'frontend',
    name: '<Vendor>/<theme>',
    locale: '<language>',
    files: [
    '<path_to_file1>', //path to root source file
    '<path_to_file2>'
    ],
    dsl: 'less'
    ...
},

使用以下标签的地方：

<theme>：您的主题代码，通常应该对应于主题目录名称。

<language>：以'code_subtag'格式指定，例如en_US。此处只能指定一个区域设置，要使用其他语言环境调试主题，请创建并声明另一个主题，为语言指定另一个值

<path_to_file>：相对于app / design / frontend / <Vendor> / <theme /> web目录的根源文件的路径，您需要指定主题的根文件，如果您的主题继承自某个主题，并且不包含其自己的根文件，请指定父主题的根文件。

6.（可选）如果您想使用Grunt自动“监听”变更，而不是每次都在浏览器中重新加载页面，请在浏览器中安装LiveReload扩展。

Grunt命令

基本上，使用grunt less：<theme>使编译得简便