在 Yii2 中从物化 css 添加完整的 css 和文件答案

【问题标题】：Adding complete css and files from materializecss on Yii2在 Yii2 中从物化 css 添加完整的 css 和文件
【发布时间】：2016-01-20 22:02:32
【问题描述】：

在我关于在Yii2 中添加它的最新问题之后，这是我的 AppAsset：

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace frontend\assets;

use yii\web\AssetBundle;

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/materialize.css',
        'css/materialize.min.css',
    ];
    public $js = [
        'js/materialize.js',
        'js/materialize.min.js',
    ];
    public $depends = [
        # 'yii\web\YiiAsset',
        # 'yii\bootstrap\BootstrapAsset',
    ];


}

这是我之前添加的那些文件的结构。：

如您所见，我刚刚添加了没有字体和图标的 css`s 和 js 文件。

那么，我应该怎么做呢？

模板有点像materialize，但我仍然认为它有问题，请参阅：

如果有很多事情要做，请指导我这样做，然后放手。

另外，它在视图中：

use common\widgets\Alert;
use frontend\assets\AppAsset;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\helpers\Html;
use yii\widgets\Breadcrumbs;

AppAsset::register($this);

干杯！

【问题讨论】：

标签： php css twitter-bootstrap yii2 yii2-advanced-app

【解决方案1】：

首先取消 'yii\web\YiiAsset' 的注释，然后只使用最低版本的 css 和 js，并添加您的应用资产 css 'http://fonts.googleapis.com/icon?family=Material+Icons'

最后你的导航栏需要是这样的

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">my company</a>
    <a href="#" data-activates="mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="<?= Url::toRoute("site/index")?>">Home</a></li>
      <li><a href="<?= Url::toRoute("site/stuff")?>">Stuffs</a></li>
    </ul>
    <ul class="side-nav" id="mobile">
     <li><a href="<?= Url::toRoute("site/index")?>">Home</a></li>
     <li><a href="<?= Url::toRoute("site/stuff")?>">Stuffs</a></li>
  </ul>
  </div>
</nav>

其他简单的方法是使用 composer 为 yii2 安装 materialize css 主题:)

【讨论】：