我正在尝试使用 Onsen UI 在 VS2017 中开发移动网站。我采取的步骤如下。1.在VS2017中创建了一个空白的ASP.NET Web应用解决方案 2.从https://github.com/OnsenUI/OnsenUI-dist/releases下载了OnsenUI-dist 2.4.0的源代码zip文件并解压到一个文件夹中。3. 复制文件夹css、css-componenets-src、js，以及VS项目根目录下的package.json文件。4.在VS项目根目录下创建index.html，并在head中引用三个文件
<script src="js/onsenui.js"></script>
<link href="css/onsenui.css" rel="stylesheet" />
<link href="css/onsen-css-components.css" rel="stylesheet" />
一切正常。唯一的问题是，如果我对文件“theme.css”进行任何更改，它不会反映在浏览器中。
onsen-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 中进行更改后我错过了一些步骤（一些构建过程）。Onsen 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>