How to expicitly load only specific (not all) css files in Meteor.js

后端未结

关注

 3  726

I want to develop a usual website with Meteor.js (not one-page web app) and I want to load only specific css files for every page. So not all pages share the same css code.

相关标签:

3条回答

花落未央

2020-12-19 03:50
First off if you are using Meteor you are not building a "usual" site, you are building a very powerful SPA (single page application). You can imitate a "usual" website with introducing routing, try IronRouter.

OK now about CSS. Once you deploy Meteor all your CSS and JS are merged and minified. So if you want to achieve what you are asking you will need to add a package like this one.

https://atmospherejs.com/mrt/external-file-loader

https://github.com/davidd8/meteor-external-file-loader

Then attach it to trigger once a template is created:
```
Template.myCustomTemplate.created = function() {
  Meteor.Loader.loadCss("//example.com/myCSS/style.css");
};
```
I believe you could also load the CSS from the Meteor server through Meteor's Asset API. Read more here: https://docs.meteor.com/#/full/assets
0 讨论(0)
发布评论:

提交评论
- 加载中...
予麋鹿

2020-12-19 03:51
I found a simple solution. In your meteor project folder create a folder named "public" (no quotes). In that folder create a folder called "css" (no quotes). Put the CSS file in that folder.

In the html file which you want the specific CSS file to apply to do the following:
```
<head>
<link href="css/yourfile.css" rel="stylesheet">
</head>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
故里飘歌

2020-12-19 04:05
Since the last part of your question says, "So not all pages share the same CSS code." you might consider using less and wrapping your template in a different div class.

For example

HTML file
```
<template name="page1">
    <div class="page1css">
        <p class="content">Page 1 content</p>
    </div>
</template>
```
LESS File
```
.page1css {
    .content {
        font-size: 2em;
    }
}
```
This way you can just wrap your pages and the corresponding css in the correct class.
0 讨论(0)
发布评论:

提交评论
- 加载中...