私は、Onsen UIを使ってVS2017でモバイルサイトを開発しようとしています。私が取った手順は以下の通りです。 1.空白のASP.NET WebアプリケーションをVS2017で作成しました。 2. OnsenUI-dist 2.4.0のソースコードをhttps://github.com/OnsenUI/OnsenUI-dist/releasesからダウンロードし、フォルダに解凍しました。 3. VSプロジェクトのルートにコピーされたフォルダcss、css-componenets-src、js、およびファイルpackage.json。 4. VSプロジェクトのルートにindex.htmlを作成し、OnsenUI in VS2017
<script src="js/onsenui.js"></script>
<link href="css/onsenui.css" rel="stylesheet" />
<link href="css/onsen-css-components.css" rel="stylesheet" />
すべてが正常に動作している頭の中で3つのファイルを参照します。 唯一の問題は、ファイル "theme.css"に変更を加えると、ブラウザに反映されないということです。
温泉-CSS-components.cssのマークアップが
@import url('./license.css');
@import url('./theme.css');
@import url('./components/index.css');
理想的には、私は、theme2.cssを言う他のいくつかの名前でtheme.cssのコピーを保存することで変更を行った後、輸入変更したいですonsen-css-components.cssのURL名です。 私はtheme.cssを変更した後、いくつかのステップ（いくつかのビルドプロセス）がないと思う。 温泉のUIチームは非常に速いペースで発展しており、テーマのカスタマイズに関する以前のチュートリアルは時代遅れになっています。私はhtmlファイルの先頭に
<link href="css-components-src/src/onsen-css-components.css" rel="stylesheet" />
に
<link href="css/onsen-css-components.css" rel="stylesheet" />
を変えたよう
私の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>