Magento 2 自定义 css 文件包含
Magento 2 custom css file include
我是 Magento 的新手,使用的是当前版本的 Magento。 2.2.0。
我有我的自定义 css 文件,我需要在网站上调用它,但问题是我不知道将 css 文件保存在哪里或如何调用该文件。
我应该把 css 放在哪里,我该如何使用它?
文档能够回答这个问题。参见此处:http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-themes.html.
摘录如下:
The recommended way to do this is adding an extending
default_head_blocks.xml
in your theme, and including the required
stylesheets in this file.
Your custom default_head_blocks.xml should be located as follows:
<theme_dir>/Magento_Theme/layout/default_head_blocks.xml
. To include a
CSS file, add the <css src="<path>/<file>" media="print|<option>"/>
block in <head>
section in a layout file. <path>
is specified relative
to the theme web directory (/web) For example, the
following illustrates how stylesheets are included in the default
Blank theme:
<Magento_Blank_theme_dir>/Magento_Theme/layout/default_head_blocks.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/styles-m.css" />
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print" />
</head>
</page>
如果您使用的是 Luma 主题,您可以直接编辑它,但最好创建您自己的主题来扩展它并在其中添加 css。参见此处:http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html.
我是 Magento 的新手,使用的是当前版本的 Magento。 2.2.0。
我有我的自定义 css 文件,我需要在网站上调用它,但问题是我不知道将 css 文件保存在哪里或如何调用该文件。
我应该把 css 放在哪里,我该如何使用它?
文档能够回答这个问题。参见此处:http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-themes.html.
摘录如下:
The recommended way to do this is adding an extending
default_head_blocks.xml
in your theme, and including the required stylesheets in this file.Your custom default_head_blocks.xml should be located as follows:
<theme_dir>/Magento_Theme/layout/default_head_blocks.xml
. To include a CSS file, add the<css src="<path>/<file>" media="print|<option>"/>
block in<head>
section in a layout file.<path>
is specified relative to the theme web directory (/web) For example, the following illustrates how stylesheets are included in the default Blank theme:
<Magento_Blank_theme_dir>/Magento_Theme/layout/default_head_blocks.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/styles-m.css" />
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print" />
</head>
</page>
如果您使用的是 Luma 主题,您可以直接编辑它,但最好创建您自己的主题来扩展它并在其中添加 css。参见此处:http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html.