Question

我为RoR应用购买了Mertronic Bootstrap主题，并且需要前端最佳实践建议。

我将Webpack用于js，将Asset管道用于css

主题中有一个/ dist文件夹或一个/ src

最好的方法是什么？

1）复制/粘贴/ vendor文件夹中的/ dist内容。这是我所做的并运作良好，但是现在如何自定义？在哪里覆盖CSS和JS？

2）使用没有缩小文件的/ src内容，并将js文件放在webpack中，并将CSS文件放在资产管道中。然后只需要自定义主题文件。

感谢您的帮助

Answer 1

对于 Metronic 主题的特定用例，以下是我遵循的步骤

复制工具到项目根目录

将最终选择的演示的 src 复制到 lib/src

打开工具/gulp.config.json

粘贴这个

{
  "config": {
    "path": {
      "src": "../lib/src"
    },
    "dist": [
      "../public/assets"
    ]
  }
}

打开工具/gulp.config.js

在配置对象中，将路径和dist更改为此

path: {
    src: "../lib/src",
    common_src: "../lib/src",
    node_modules: "node_modules",
},
dist: ["../public/assets"],

进入工具目录

npm install --global npm@latest

npm install --global yarn

npm install --global gulp-cli

npm rm --global gulp

gulp --version

yarn

gulp

gulp watch

现在您的资产正在构建为公共/资产

所有 js/css 更改都需要对 lib/src 进行

通过 gulp watch 运行 watcher，任何新的变化都会立即移植到 public/assets

要覆盖样式，请使用文件 lib/src/sass/components/_variables.custom.scss

对于生成的布局部分

使用 https://preview.keenthemes.com/metronic8/demo1/layout-builder.html

创建您的布局

将生成的layout和partials的内容放在app/views/目录下

转到 app/views/layout 并在您的终端中执行下面的 shell 命令

for file in */*/*/*.html; do mv "$file" "${file/.html/.html.erb}"; done

for file in */*/*.html; do mv "$file" "${file/.html/.html.erb}"; done

for file in */*.html; do mv "$file" "${file/.html/.html.erb}"; done

for file in *.html; do mv "$file" "${file/.html/.html.erb}"; done

转到 app/views/partials 并在您的终端中执行下面的 shell 命令

for file in */*/*/*.html; do mv "$file" "${file/.html/.html.erb}"; done

for file in */*/*.html; do mv "$file" "${file/.html/.html.erb}"; done

for file in */*.html; do mv "$file" "${file/.html/.html.erb}"; done

for file in *.html; do mv "$file" "${file/.html/.html.erb}"; done

在 app/views 目录中执行 CMD+SHIFT+F（在文件夹中查找）

查找并替换到 ' %>

查找 /_ 并将其替换为 /

index.html 移动到 application.html.erb 作为其根布局

master.html 改为 _master.html.erb

我在 GitHub 上创建了一个要点以将 Metronic 与 Rails 集成。也许它可以帮助你https://gist.github.com/kamalptw/cad9cc02dc7d483aaa8f2e05ed2b8fc6

为购买的主题覆盖/ dist或/ src-Rails

1 个答案: