Question

假设我有两条路线需要两个不同的css，如下所示。

<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Orange.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>

需要

<Application.Resources>
    <DataTemplate DataType="{x:Type vm:OperationViewModel}" x:Key="OpKey">
        <v:OperationView/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:PlayerViewModel}" x:Key="PKey">
        <v:PlayerView/>
    </DataTemplate>
        <ResourceDictionary x:Key="MetroStyle">
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Orange.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

并且

DataTemplate

需要

ResourceDictionary

我不能将两个css放在同一个头文件中，因为它们是冲突的。我不能做如下的事情。

App.Xaml

有没有办法把不同的css用于不同的路线？

注意：我需要头部css以避免故障。

Answer 1

您可以为两条路线使用不同的布局。

<template name="css1">
  <head>
   <link rel="stylesheet" href="/dashboard.css">
</head>
  <div class="main">
    {{> yield}}
  </div>
</template>

和

<template name="css2">
  <head>
   <link rel="stylesheet" href="/home.css">
</head>
  <div class="main">
    {{> yield}}
  </div>
</template>

并在路线的布局选项中使用它，如：

this.route('path to css1', {
  path: '/',
  layoutTemplate: 'css1',
  template: "css1 template"
});

或者：

你可以这样做：

<template name="layout">
  <head>
  {> yield region="css"}}
</head>
  <div class="main">
    {{> yield}}
  </div>
</template>

和

this.route('path to css1', {
  path: '/',
  layoutTemplate: 'layout',
  template: "css1 template"
  yieldTemplates: {
  'temple having css1': {to: 'css'}
  }
});

Answer 2

Meteor以类似于Rails＆＃39;的方式编译所有CSS。资产管道。

您的问题来自非单页应用心态。

您可以在多页网站中为不同的页面添加不同的样式表。但是，对于只有一页的应用程序，这将如何工作？

相反，你应该调整你的风格规则。

IE，而不是.container { color: blue }，执行.container .home-container { color: blue }。

之类的操作

Iroun路由器在不同路由上的不同css

2 个答案: