magento前端css之-引入样式文件
7天成为Magento系统架构师,现在开始学习Magento全栈开发!
《Magento2.X企业级开发实战》
magento前端css之-引入样式文件
在 Magento 应用程序中,CSS 文件包含在布局文件中。
从技术上讲,可以选择将它们包含在模板文件中,但我们强烈建议避免这种情况。
CSS 类名可以在模板和布局中指定。
本主题描述默认情况下如何在 Magento 应用程序文件系统中定位样式表,以及在布局中包含 CSS 文件的推荐方法。
Magento 样式表文件的组织方式
传统上,CSS 和 Less 文件仅存储在主题中。 模块目录不包含任何默认样式。
在主题目录中,样式表存储在以下位置:
Directory, relative to <theme_dir> |
Description |
---|---|
/<Namespace>_<Module>/web/css
|
Module-specific styles. |
/web/css
|
Contains the following:
|
包含 CSS
在 Magento 应用程序中,推荐的包含样式表的方法是在布局文件中指定它们。
通常,您包含的样式表应该可用于所有商店页面。 为此,请将您的 CSS 包含在 Magento_Theme 模块的 default_head_blocks.xml 中,该模块定义了所有 Magento 页面的默认 页面部分。 推荐的方法是在您的主题中添加一个扩展的 default_head_blocks.xml,并在此文件中包含所需的样式表。
您的自定义 default_head_blocks.xml 应位于如下位置:
/Magento_Theme/layout/default_head_blocks.xml。
要包含 CSS 文件,请在布局文件的 部分中添加 是相对于主题 web 目录 (/web) 指定的
例如,要包含 /web/css/custom.css:
<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/custom.css" rel="stylesheet" type="text/css" /> </head> </page>
下面说明了如何将样式表包含在默认的空白主题中:
[/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>
要包含外部 CSS 文件,请添加 。
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" rel="stylesheet" type="text/css" /> </head> </page>
如无特殊说明或标注,任何个人或组织,复制、转载、采集本站内容请注明:
本文来源于:【Magento中文网】,并添加本文地址链接。
如未按上述操作复制或转载,本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
本文来源于:【Magento中文网】,并添加本文地址链接。
如未按上述操作复制或转载,本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益,可联系我们进行处理。