使用 bootswatch.com 中的主题设计 Mirage 2 的样式 [英] Styling of Mirage 2 using themes from bootswatch.com
问题描述
基于 自述文件 Mirage 2，它在这里说:
Based from the Readme files of Mirage 2, it says here:
如果您想将您的主题基于现有的 Bootstrap 主题(例如 bootswatch.com 上的主题)，您可以通过使用标准的 Bootstrap 配色方案并替换 bootstrap_color_scheme/_main.scss 中的 Bootstrap 导入来实现:
If you want to base your theme on an existing Bootstrap theme (like the ones at bootswatch.com) you can do so by using the standard Bootstrap color scheme and replacing the import of Bootstrap in bootstrap_color_scheme/_main.scss:
@import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap";
仅导入其 _variables.sccs 文件(需要定义这些变量，因为它们在 _dspace-bootstrap-tweaks.scss 中使用):
with an import of just its _variables.sccs file (those variables need to be defined, because they are used in _dspace-bootstrap-tweaks.scss):
@import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables";
然后在其下方导入您选择的 Bootstrap 主题的 css 文件.根据主题，您可能还需要更新导入语句正上方的 twbs-font-path 函数.
Then import the the css file(s) of your Bootstrap theme of choice below it. Depending on the theme you may also need to update the twbs-font-path function right above that import statement.
我做了什么:
好的，所以我激活了 mirage2_bootstrap_color_scheme maven 配置文件.将 bootstrap_color_scheme/_main.scss 从 dspace-xmlui-mirage2/src/main/webapp/styles/ 复制到 dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles.
Ok, so I activated the mirage2_bootstrap_color_scheme maven profile. Copied the bootstrap_color_scheme/_main.scss from dspace-xmlui-mirage2/src/main/webapp/styles/ into dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles.
我更改了 _main.scss 中的文本，内容为 @import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap";进入@import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables";，然后我复制了bootstrap.min.css 我从 bootswatch.com 下载并将其与 _main.scss 放在同一目录中，然后在 _main.scss 中使用 @import 引用它"bootstrap.min.css"; 语句.
I changed the text in _main.scss that says @import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap"; into @import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables";, and then I copied the bootstrap.min.css that I downloaded from bootswatch.com and put it in the same directory with _main.scss and then I referenced it in _main.scss with an @import "bootstrap.min.css"; statement.
我在运行 mvn package 时遇到此错误:
I'm having this error when running mvn package:
error styles/main.scss (Line 12: File to import not found or unreadable: variables.`
我也尝试将 _variables.scss 放在 bootstrap_color_scheme 目录下并使用 @import "variables"; 但我得到了相同的未找到或无法读取的错误.
I also tried putting the _variables.scss under the bootstrap_color_scheme directory and used the @import "variables"; but I got the same not found or unreadable error.
有人可以指导我如何正确使用 bootswatch.com 上的主题来应用 Mirage 2 吗?使用来自 bootswatch.com 的示例主题的示例和简单演练会很棒.
Can someone guide me on how to correctly use the themes from bootswatch.com to apply to Mirage 2? An example and a simple walk through of using a sample theme from bootswatch.com would be great.
提前致谢.
推荐答案
我删除了另一个答案，因为我错了.这是一个工作 bootswatch 主题的示例:https://github.com/antoine-atmire/DSpace/tree/mirage2%2Bbootswatch/dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles
I deleted my other answer because I was mistaken. Here is an example of a working bootswatch theme: https://github.com/antoine-atmire/DSpace/tree/mirage2%2Bbootswatch/dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles
/styles/bootstrap_color_scheme/_main.scss 文件在构建过程中被复制到 /styles/main.scss，所以 @import 语句应该相对于/styles/main.scss.
The /styles/bootstrap_color_scheme/_main.scss file gets copied to /styles/main.scss during the build process, so the @import statements should be relative to /styles/main.scss.
这篇关于使用 bootswatch.com 中的主题设计 Mirage 2 的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
