I am trying to use Onsen UI for developing a mobile website in VS2017. The steps I took are as below. 1. Created a blank ASP.NET web application Solution in VS2017 2. Downloaded source code zip file of OnsenUI-dist 2.4.0 from https://github.com/OnsenUI/OnsenUI-dist/releases and unzipped in a folder. 3. Copied folders css, css-componenets-src, js, and file package.json in VS project root. 4. Created index.html in root of VS project and referenced three files in head
<script src="js/onsenui.js"></script>
<link href="css/onsenui.css" rel="stylesheet" />
<link href="css/onsen-css-components.css" rel="stylesheet" />
Everything is working fine. The only problem is that if I make any changes in file “theme.css” It is not reflected in browser.
The markup of onsen-css-components.css is
@import url('./license.css');
@import url('./theme.css');
@import url('./components/index.css');
Ideally I want to save a copy of theme.css with some other name say theme2.css, make changes in it and then change imported URL name in onsen-css-components.css. I think I am missing some step (some build process) after making changes in theme.css. Onsen UI team is developing at very fast pace and previous tutorials about theme customization has become outdated.
Complete markup of my index.html is
<!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>
