如何在Meteor.js中只加载特定（而不是全部）css文件_Meteor

如何在Meteor.js中只加载特定（而不是全部）css文件

meteor

如何在Meteor.js中只加载特定（而不是全部）css文件,meteor,Meteor,我想用Meteor.js开发一个普通的网站（不是一个页面的web应用程序），我只想为每个页面加载特定的css文件。因此，并非所有页面都共享相同的css代码。有可能吗？首先，如果您使用的是Meteor，那么您不是在构建一个“普通”网站，而是在构建一个功能强大的SPA（单页应用程序）。你可以模仿一个介绍路由的“普通”网站，试试看好了，关于CSS。一旦部署Meteor，所有CSS和JS都将合并并缩小。所以，如果你想达到你的要求，你需要添加一个像这样的包创建模板后，将其附加到触发器： Temp

我想用Meteor.js开发一个普通的网站（不是一个页面的web应用程序），我只想为每个页面加载特定的css文件。因此，并非所有页面都共享相同的css代码。

有可能吗？

首先，如果您使用的是Meteor，那么您不是在构建一个“普通”网站，而是在构建一个功能强大的SPA（单页应用程序）。你可以模仿一个介绍路由的“普通”网站，试试看

好了，关于CSS。一旦部署Meteor，所有CSS和JS都将合并并缩小。所以，如果你想达到你的要求，你需要添加一个像这样的包

创建模板后，将其附加到触发器：

Template.myCustomTemplate.created = function() {
  Meteor.Loader.loadCss("//example.com/myCSS/style.css");
};

我相信你也可以通过Meteor的资产API从Meteor服务器加载CSS。在这里阅读更多内容：

，因为你的问题的最后一部分说：“所以不是所有的页面共享相同的CSS代码。”你可以考虑使用更少，并在不同的div类中包装你的模板。比如说

HTML文件

<template name="page1">
    <div class="page1css">
        <p class="content">Page 1 content</p>
    </div>
</template>

这样，您就可以将页面和相应的css包装到正确的类中。

我找到了一个简单的解决方案。在meteor项目文件夹中创建一个名为“public”（无引号）的文件夹。在该文件夹中创建一个名为“css”（无引号）的文件夹。将CSS文件放在该文件夹中

在要应用特定CSS文件的html文件中，执行以下操作：

<head>
<link href="css/yourfile.css" rel="stylesheet">
</head>

不建议这样做-这会使你的应用程序速度变慢。目前最好的做法是将所有网站的CSS连接到一个文件中。这并不适用于所有情况，因为这取决于网站CSS的大小。CSS加载过程会阻止页面呈现。所以，如果你有很少的CSS，最好完全加载它，甚至内联它。但是如果你有很多CSS，最好先加载只呈现一个页面，甚至只呈现折叠内容上方所需的CSS，然后推迟加载其余样式。你可以在这里找到更多信息：@Eugene向我介绍一些要点并接受答案：）这样无论访问哪个页面，都会加载整个应用程序的所有CSS。是的，这是真的，但它也只加载一次。然后，它使用特定的CSS作为模板。我不确定Eugene到底想做什么。我个人使用相同的概念来避免不同模板样式之间的重叠。尽管我建议使用ID来区分。模板page1将获得一个ID“view-page1”-我只需要记住不要使用任何以view开头的ID-以避免冲突。此外，您还有一个带有共享样式的公共.less文件

meteor add less

如果你有一个自定义主题的css文件，并且你只想在一个页面上加载它，那该怎么办？修改类选择器将意味着更改每个规则的类？实际上，您现在可以使用导入，因此我的答案不适用于Meteor的较新版本（>1.3）。Meteor的真正含义有一个非常简短和准确的解释：）+1但如果我们移回上一个视图，您的css仍会加载。也就是说，css不会被删除，因此上一个视图css会发生变化。

<head>
<link href="css/yourfile.css" rel="stylesheet">
</head>