Erlang/Elixir 在 Phoenix 中使用 UIKit 和 SCSS

skpark1987 · 发布于 2017年09月13日 · 237 次阅读
17502

通过这篇文章,我们学习如何在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地址

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