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

2018年11月1日 浏览量 28 2 min read
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 clean:<theme>

 

例如:

grunt clean:blank

删除pub / static和var目录中与主题相关的静态文件。
grunt exec:<theme> 将符号链接重新发布到源文件的pub / static / frontend / <Vendor> / <theme> / <locale>目录。
grunt less:<theme> 使用pub / static / frontend / <Vendor> / <theme> / <locale>目录中发布的符号链接编译.css文件
grunt watch 跟踪源文件中的更改,重新编译.css文件,并在浏览器页面中重新加载页面(您需要为浏览器安装LiveReload)

基本上,使用grunt less:<theme>使编译得简便

Previous article:
Next article:
Comments
发表评论,留下你的足迹
我们不会公开你的邮箱地址

是否允许我们在发布新内容或者进行促销活动向您发送消息?

Remind me later

Thank you! Please check your email inbox to confirm.

Oops! Notifications are disabled.

© 2014-2023 www.magease.com. All Rights Reserved. 寰云网络 版权所有    鲁ICP备 14014975号-1