0
我想在VS2017中使用Onsen UI开发移动网站。我采取的步骤如下。 1.在VS2017中创建了一个空白的ASP.NET Web应用程序解决方案 2.从https://github.com/OnsenUI/OnsenUI-dist/releases下载了OnsenUI-dist 2.4.0的源代码zip文件并解压到一个文件夹中。 3.在VS项目根目录中复制文件夹css，css-assemblies-src，js和package.json文件。 4. VS项目的根目录中创建index.html，然后在头引用三个文件VS2017中的OnsenUI
<script src="js/onsenui.js"></script>
<link href="css/onsenui.css" rel="stylesheet" />
<link href="css/onsen-css-components.css" rel="stylesheet" />
一切工作正常。 唯一的问题是，如果我在文件“theme.css”中做任何更改它不反映在浏览器中。
温泉 - CSS-components.css的标记是
@import url('./license.css');
@import url('./theme.css');
@import url('./components/index.css');
理想我想保存theme.css的副本与其他一些名字说theme2.css，在其中进行更改，然后改变进口onsen-css-components.css中的URL名称。 我认为我在theme.css中进行了更改之后缺少一些步骤（某些构建过程）。 温泉UI团队正在以非常快的速度发展，之前关于主题定制的教程已经过时。
我的index.html的完整的标记是
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/onsenui.js"></script>
<link href="css/onsenui.css" rel="stylesheet" />
<link href="css/onsen-css-components.css" rel="stylesheet" />
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
<ons-list-item onclick="fn.load('settings.html')" tappable>
Settings
</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="home.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Main
</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
Swipe right to open the menu!
</p>
<ons-bottom-toolbar>
<div class="center">Hello</div>
</ons-bottom-toolbar>
</ons-page>
</ons-template>
<ons-template id="settings.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Settings
</div>
</ons-toolbar>
<ons-bottom-toolbar>
<div class="center">Hello</div>
</ons-bottom-toolbar>
</ons-page>
</ons-template>
<ons-template id="about.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
About
</div>
</ons-toolbar>
</ons-page>
</ons-template>
<script>
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function (page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page)
.then(menu.close.bind(menu));
};
</script>
</body>
</html>