Hi folks so I just inherited this Keystonejs project and it is using pug. Everything's going good except I can't create new mixins.
Not only that but the old mixins(already defined) are working fine. I just can't create new mixins. If I do, I get this error:
Sorry an error occurred loading the page(500)
...
...
pug_mixins.info is not a function.
index.pug
extends ../layouts/default
block content
+hero-header()
+info()
info.pug
mixin info()
.info
.container
.row
.col-md-4
.site-info__box
.col-md-4
.site-info__box
.col-md-4
.site-info__box
Any help would be much appreciated.
Update:
If I move everything inside info.pug inside index.pug then it works.
Also, there's another mixin called hero-header. If I move everything from info.pug to hero-header.pug, it works fine.
Welp nevermind. We have a master pug file which has all mixin files includes in it. Forgot to add info.pug inside it.
Related
im trying to build a markdown blog website but I've ran into a bug. I use tailwindCSS for my project so all of the default styles are removed. So when I added markdown to my project it didn't look good as it shouldn't. However when I revert all styles like:
<style>
p{
all: revert;
}
h1{
all:revert;
}
h2{
all:revert;
}
h3{
all:revert;
}
... and so on.
It works perfectly while I'm in this developing session. However if I reload the page it doesn't work anymore. Feels like the style tag doesn't get applied but if I remove the style tag, save and paste it back in it works again.
It just feels like a weird bug does anyone know how to fix it? much appreciated
Right i fixed it, if anyone has this bug. To revert certain elements back to their default styles. add the all: revert within the selector like I did but except of putting it in a vue component add it into the index.css where you import your tailwind
I've a problem with a Vue-js application (Vue 2.6.6).
I need to create a new page in this application that must not be affected by vuetify and other styles placed in the head of index.html file. I wanna now if it is possible to inject a view (navigating to it with routing) without applying styles or if it is possible to create another entry point for the app, making it as a multi-page application.
I've found a documentation for doing it, but the structure of files and folders they talk about is different from mine (I did not create the project) and I don't understand what I gotta do to set multiple pages.
https://cli.vuejs.org/config/#pages
I have a "main-priv.js" file inside src, not a "main.js", don't know if it is same.
I'm really bad with configurations and stuff like that, I've probabily taken the wrong life choice with this work, but nevermind, can you help me?
For a project where Vue is dropped in, is using style or similar available to components?
Vue.component('vue-sup', {
template: '<div>Sup</div>',
style: '* { color: blue; }'
})
I tried adding the styles inside the template like:
<div>
<style>
.here{}
</style>
<div>Sup</div>
</div>
which didn't work because the template parser detected a tag with side effects
Vue's implementation of scoped css is entirely a feature of vue-loader, and thus only works with compilation. Scoped css momentarily made a debut into Html 5 but saw almost no adoption and was dropped entirely as far as I know. There is the anticipation that "Shadow DOM" may be supported broadly and could be use to add scoped css, but adoption is not there yet either.
So at this point you can add unique classes or ids obviously to a parent container and scope your css that way, but is understandably not what you are asking for nor is it always practical.
The best alternative is a pollyfill. There are several that are available. Here is one by Sam Thorogood and another by Thomas Park but if you do a quick search you will likely discover more.
I came across the same problem and I'm able to insert styling inside Vue template
by creating a component that will dynamically insert a <style> tag on the DOM. This might be impractical like #skribe said but it allows me to have separate CSS from JS without using .vue extension.
You can take a look at this
I've written the following in an Aurelia app
import "bootstrap/css/bootstrap.css!";
import "./app.css!";
and I want app.css second in since it overrides bootstrap.css styles. However, I'm getting app.css first since I presume the system.js loader is running them in parallel and since app.css is the smaller of the two it gets loaded first.
Is there a way in jspm to define a dependency between these two files to control their loading order is is there some other way?
Many thanks in advance! :)
You could try to import the css using System.import.
E.g. in your index.html:
System.import('bootstrap/css/bootstrap.css!').then(() => {
System.import('./app.css!');
});
But keep in mind that this way you have to make sure that system.js is served with your app. So you can't bundle your whole app as an self-executing bundle.
We have some stuff in the pipeline that should help you with this issue. If you check out this:
<template>
<require from="nav-bar.html"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</template>
I know that Aurelia will be passing the CSS files to the loader in order, but I'm not sure if we'll be able to guarantee loading order. Hopefully Rob can come over here and give a proper answer to this, though. I'll point him in this direction.
I had exactly the same problem. Controlling order of CSS is not possible in JSPM. I solved this problem with SASS and some tricks. Here's what I've done:
In html you give main element some id:
<html id="some-id">
Then you create sass file that will host your overrides (_overrides.scss):
#some-id {
#import "buttons";
}
Now your buttons.scss can override styles from bootstrap (_buttons.scss):
.btn-default {
background-color: #B6B3C7;
border-color: #B33A3A;
}
This works thanks to the principle in CSS - most specific selector wins. By wrapping all your customizations in #some-id in scss it will produce code with every bit of code that is imported into curly braces prefixed by #some-id. This way your selector will always be more specific than bootstrap one and will override it.
I don't know if this will be sufficient for you as you don't mention scss, but it was for me.
I've faced similar issue during development.
The code below has helped me solve my problem.
Now everything is loading exactly the way I want it.
System.import('bootstrap/css/bootstrap.css!').then(() => {
System.import('./app.css!');
});
Thanks LazerBass for this suggestion.
It seems to be impossible to disable auto initialization:
Both
$.lazyLoadXT.autoInit=false;
AND
$.extend($.lazyLoadXT, {
autoInit: false
});
do not prevent lazy loading.
jsfiddle:
https://jsfiddle.net/cvlug/16f5h1mn/
You may want to try the code specified in the docs:
$.lazyLoadXT.autoInit=false;
That didn't work for our project, which loads jQuery and lazyLoadXT sandboxed within a Require.js object. LazyLoadXT appears to be trying to access jQuery as window.$ which, but that is not where jQuery is located when it's loaded inside Require.js.
We ended up making a fork of lazyLoad that addresses this issue, by removing their jQuery wrapper and wrapping their code inside a Require.js define statement. Now it's all the same scope. Maybe it will be useful:
https://github.com/Sitetheory/lazy-load-xt