I'm using gatsby.js with a styled component to develop my portfolio and when it doesn't render any CSS when I load my site the first time. However, it renders all CSS correctly when I refresh the page. What could be the reason?
This is my portfolio: https://haribhandari.me
The first time you open the link, the CSS will not load, however, if you refresh it will.
When using styled components, Gatsby on production may not render styles correctly. To fix that, follow those instructions:
Install following packages:
npm install gatsby-plugin-styled-components styled-components
babel-plugin-styled-components
Edit the gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-styled-components`,
options: {
// Add any options here
},
},
],
}
More information are described in the documentation
A great way to let other's help you out is to provide some code snippets as it is hard to go through your site's code just in the browser tools.
I am not a gatsby expert and hope someone can help you understand the concept better. I would look into your <head> section.
<link as="script" rel="preload" href="/component---cache-caches-gatsby-plugin-offline-app-shell-js-ad6431e4664bcf916d19.js">
There is a similar topic regarding this issue here Gatsby v2 site does not load CSS properly
I also notice that your menu does not scroll to your projects section, you may want to take a look at that code as well.
Hope this helps
Related
I am building a web page and i have a problem about the page. In the 'routes', I created a custom link:
Route::get('/customization/footer', 'Controller#footer');
So, the page will be loaded using https://myweb.com/customization/footer. But, using that link, the page didn't load the style (css and js). And then, when I changed the link on 'routes' becoming:
Route::get('/footer', 'Controller#footer');
the page loaded perfectly (no problem found).
The reason I used a longer link is to make it tidier. Does anyone know about how to solve this problem? I need help 🙏
P.S.: The problem is not in how the style files (like css and js files) are called. The problem is in the link I used as I stated in my question
You havent shown how to include styles on your page.
The best way to connect styles is via a helper asset()
<link href = "{{asset('css/app.css')}}" rel = "stylesheet">
(for path /public/css/app.css)
I'm brand new to using Nuxt.js, and having an issue: When I created my project, the layouts folder wasn't generated automatically as documented. I added it manually, but default.vue is not being applied anywhere. Here is layouts/default.vue:
<template>
<div>
<AppHeader/>
<Nuxt/>
</div>
</template>
I've tried things such as manually setting default as the layout in pages and manually importing the AppHeader component in default.vue (although this is definitely not the issue as other HTML I put there doesn't get rendered either). Not sure what's going wrong here, scratching my head. Using nuxt 2.15.7. If there's any additional detail needed please let me know what and I'll gladly provide, thanks.
Today, I faced the same issue, I just stop the dev command and did "npm run dev" again.
It woked like a charm.
I also faced this issue today, and it took my like 15 minutes to realize...
I just named my folder layout instead of layouts :')
I'm posting it just in case someone else is as distracted as I am
Was Facing this same issue, it was fixed by wrapping contents of app.vue with <NuxtLayout></NuxtLayout>
example:
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
For more details look here:
https://github.com/nuxt/framework/discussions/2883
Just define your components folder path in nuxt.config.js
eg:
components: {
dirs: [
'~/shared',
'~/shared/atoms',
'~/shared/molecules',
'~/shared/organisams',
]
},
Just trying to get a basic example of react-tabs working. The styling seems to be missing. The example below is in code sandbox (look in 'Hello.js'), but I see exactly the same behavior after installing the package into my project via npm. What am I missing? Thanks!
https://codesandbox.io/s/jzql1q6819
From the docs at https://github.com/reactjs/react-tabs#styling
react-tabs does not include any style loading by default. Default stylesheets are provided and can be included in your application if desired.
You will have to import the styles yourself. I don't think Code Sandbox will let you import them directly from the NPM package, so you will have to use a CDN or other source.
Besides that, the tabs are working in your example. Clicking a list item reveals different content
Here is a fork of your example with the styles added: https://codesandbox.io/s/ym7l2zk4oj
I was trying to create a theme for Drupal 8.1.8. My CSS and JS files unfortunately cannot be loaded. I have checked if I used any tab characters, but I have used always 2 space characters for an indent.
I have read the documentation page at Drupal.org: https://www.drupal.org/theme-guide/8/assets. I was trying around 2 hours with all possible combination. Also I tried the google search, Drupal core code inspection.. I could not figure it out.
My theme is located at themes/englishtrainer. The css is located in themes/englishtrainer/css and the javascript files are in themes/englishtrainer/js. The theme can be enabled as a theme without problems.
The contents of my theme's files in the following.
englishtrainer.info.yml:
name: Englishtrainer
type: theme
core: 8.x
version: '1.0.0'
libraries:
- englishtrainer/base
regions:
content: Content
header: Header
englishtrainer.libraries.yml:
base:
version: VERSION
css:
theme:
css/css-test.css: {}
js:
js/js-test.js: {}
css/css-test.css:
body {
background-color: red;
}
js/js-test.js:
alert('it is loaded!');
I was checking the html markup for any occurrences. The javascript console has been also checked. It does not contain any entries. I have cleared the entire Drupal cache and disabled/enabled the theme. Nothing helped.
Do you have any idea?
Solved it. My issue was, that I had a theme "and" a module with the same name. However the module did not implement any theming components. But this broke the theme. After I have uninstalled the module with the same name, the background was red (css worked) and the javascript alert appeared (javascript worked).
Thank you for your attention.
Is there any way I could download the exact custom templates that Bootstrap made? Like the Dashboard, Signin page, Cover page, Carousel page http://getbootstrap.com/examples/carousel/ and more.
Is there a way to do this without manually copying their source codes from the developer tools/inspect element >> resources?
Because even if I download from their customize page (http://getbootstrap.com/customize) it only returns the very basic bootstrap pack-- the bootstrap.js, bootstrap-theme.js, bootstrap.css, glyphicons.. there is no even html template included.
Bootstrap always keeps a Github repo of all the resources whether it be documentation or HTML or CSS or JS.
You can find all their relevant documents and the examples at their Github repo.
The ones you are specifically looking for can be found here.