当前位置: 首页>>技术问答>>正文


如何在Magento 2中添加自定义CSS文件

webfans 技术问答 , , 去评论

问题描述

有没有办法创建我自己的CSS文件,在级联中最后加载?

如果是这样,我如何以及在何处添加自定义CSS文件?

最佳解决方案

要添加自定义css并加载最后一个,您必须设置自定义主题。

  1. 创建主题:http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

  2. 确保将Magento应用程序设置为开发人员模式。

  3. 将以下文件夹添加到自定义主题

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

创建以下文件:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

将此代码放在default_head_blocks.xml中

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>
  1. 应用您的主题:http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html

  2. 部署静态资源(SSH到magento root):

php bin/magento setup:static-content:deploy

次佳解决方案

为了添加自定义css并加载最后

  1. 按照目录结构app /code /vendor /modulename /view /frontend(对于admin adminhtml)/web /css /filename.css

  2. 将css文件路径添加到相应的布局文件中,如下所示

    <head>
      <css src="Vendor_Module::css/filename.css"/>
    </head>
    <body>
     ....
    </body>
    

第三种解决方案

您可以添加magento 2将放在head部分的css末尾的media属性。设置仅1px的宽度将在所有设备上启用它:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

参考资料

本文由朵颐IT整理自网络, 文章地址: https://duoyit.com/article/2409.html,转载请务必附带本地址声明。