Erlang/Elixir 在 Phoenix 中使用 UIKit 和 SCSS

skpark1987 · 2017年09月13日 · 2836 次阅读

通过这篇文章,我们学习如何在 Phoenix(当前版本是 1.3) 中安装 UIKit3。

预备知识

显然你的电脑中应该安装ElixirPhoenix。你还需要安装NPM,通过它我们会安装Brunch及其它的一些依赖库。

安装

先新建一个 Phoenix 工程,

mix phx.new phx_uikit

当安装依赖库的时候注意最后一行

* running cd assets && npm install && node node_modules/brunch/bin/brunch build

它将会执行npm install,在 assets 目录中安装brunch构建工具 因此下一步进入到assets目录后,安装相关的依赖库

cd phx_uikit/assets
npm install --save-dev sass-brunch
npm install --save uikit jquery

我们将会安装sass-brunch来编译 SCSS/SASS,我们还将安装uikitjQuery(因为 uikit 需要它)。 ### 配置 我们安装好了依赖库,现在做一下简单的配置。所有的配置代码都是在assets/brunch-config.js中进行。 把下面的代码拷贝到该文件的 plugins 对象里:

sass: {
  options: {
    includePaths: ["node_modules/uikit/src/scss"]
  }
}

下一步我们需要添加 uikit 的 JavaScript 库到 app 中。我们仅需要添加下面的代码到 npm 对象:

globals: {
  $: "jquery",
  uikit: "uikit",
  icons: "uikit/dist/js/uikit-icons"
}

这一段会告诉 brunch 我们将使用 $ 来全局使用 jQuery,用 uikit 来使用 uikit。 我们还会使用 uikit 的图标。因此添加下面的代码到 app.js

uikit.use(icons);

导入

为了使用 UIKit 所提供的 SCSS 文件,我们需要导入 SCSS 到我们到 main SCSS 文件。 首先我们重命名 app.cssapp.scss,并且删除 phoenix.css。然后添加下面的代码到 app.scss 中。

@import "variables-theme";
@import "mixins-theme";
@import "uikit-theme";

这将会导入 uikit SCSS 到我们的工程当中。

测试

我们仅需要添加下面的代码到app.html.eex中来进行测试。

<div class="uk-alert-danger" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <h3>Notice</h3>
  <p>This is a paragraph</p>
</div>

启动mix phx.server查看结果。

原文链接

github 地址

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册