Question

我正在尝试使用Onsen UI在VS2017中开发移动网站。我采取的步骤如下。 1.在VS2017中创建了一个空白的ASP.NET Web应用程序解决方案 2.从https://github.com/OnsenUI/OnsenUI-dist/releases下载OnsenUI-dist 2.4.0的源代码zip文件并解压缩到一个文件夹中。 3.在VS项目根目录中复制文件夹css，css-componentsnets-src，js和file.json。 4.在VS项目的根目录中创建index.html并引用头部

中的三个文件

    <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>

Answer 1

我改变了

<link href="css/onsen-css-components.css" rel="stylesheet" />

到

<link href="css-components-src/src/onsen-css-components.css" rel="stylesheet" />

在html文件头中，我可以看到自定义主题的结果。这是因为onsen-css-components.css中的theme.css的导入路径。

VS2017中的OnsenUI

1 个答案: