I have create a new laravel 9 project and I have encounter an css and js assets connection problem
At first, I have run
php artisan serve
to see if my project is working , and seems like everything is fine .
but when I just simply remove an part from the view , the css/js just get disabled to the view
even I undo the changes , the css are still not working . did any know whats happen?
here is my code for the css, and I believe it was properly connected
<head>
<meta charset="utf-8" />
<title>Admin Dashboard </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="Themesdesign" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="{{ asset('backend/assets/images/favicon.ico')}}">
<!-- jquery.vectormap css -->
<link href="{{ asset('backend/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css')}}" rel="stylesheet" type="text/css" />
<!-- DataTables -->
<link href="{{ asset('backend/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
<!-- Responsive datatable examples -->
<link href="{{ asset('backend/assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
<!-- Bootstrap Css -->
<link href="{{ asset('backend/assets/css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="{{ asset('backend/assets/css/icons.min.css')}}" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="{{ asset('backend/assets/css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
</head>
codes for vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
refresh: true,
}),
],
});
I have already do some research and seems like it might be related to the "vite", but It was something very strange to me . Could anyone tell me what should I do . Thank you in advance
From version 9.19.0 Laravel has drop the webpack and added the vitejs
To add css and js, you need to configure the vite
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'backend/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css',
'backend/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css',
'backend/assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css',
'backend/assets/css/bootstrap.min.css',
'backend/assets/css/icons.min.css',
'backend/assets/css/app.min.css',
]),
],
});
To run the dev serve npm run dev
In blade
#vite([
'backend/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css',
'backend/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css',
'backend/assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css',
'backend/assets/css/bootstrap.min.css',
'backend/assets/css/icons.min.css',
'backend/assets/css/app.min.css',
]);
For more information laravel vite doc
Related
I make site In laravel 9 with Inertiajs/vuejs 3 based on https://github.com/ColorlibHQ/AdminLTE 3 (dark mode).
I removed all jquery and use vuejs only. it works ok for for, but when I open site
is looks broken, like not all styles were loaded,
Please try enter to login into adminarea by url :
https://bi-currencies.my-demo-apps.tk/admin/currencies
credentials are in Login form
and pages looks like : https://prnt.sc/TCjBh0SefUMO 4
But if to refresh page with “CTRL+R” pages looks ok, in dark mode.
Any ideas why so and how that can be fixed?
More Details :
Adminare is based on https://github.com/ColorlibHQ/AdminLTE template(with "bootstrap": "^4.6.0").
Frontend is based on custom https://technext.github.io/space/v1.0.0/ template (with Bootstrap v5.0.1 )
I have the same design issue when I switch from admin area
frontend page https://bi-currencies.my-demo-apps.tk/home
I see this problem of other browsers of my Kubuntu 20 too.
Maybe problem is that that I use too different templates, but actually I use different layouts, so in
app/Http/Middleware/HandleInertiaRequests.php :
public function rootView(Request $request)
{
if ($request->segment(1) == 'user') {
return 'layouts/user';
}
if ($request->segment(1) == 'admin') {
return 'layouts/adminlte'; // TODO
}
return 'layouts/frontend'; // Current request is front-end
}
This project has no Redis or other chache tools installed. Sure I cleared all cache opening the site. Any other ideas?
Frontend template resources/views/layouts/frontend.blade.php :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/frontend_favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Yantramanav:wght#300;400;500;700;900&display=swap"
rel="stylesheet">
<!-- Styles -->
#routes
<!-- Scripts -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<link rel="stylesheet" href="/css/theme.css">
<script src="/vendors/#popperjs/popper.min.js"></script>
<script src="/vendors/bootstrap/bootstrap.min.js"></script>
<script src="/vendors/is/is.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
<script src="/vendors/fontawesome/all.min.js"></script>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
#inertia
</body>
</html>
and admin template resources/views/layouts/adminlte.blade.php :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Styles -->
<link rel="stylesheet" href="/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/css/fontawesome_all.min.css">
<link rel="stylesheet" href="/css/adminlte.min.css">
<link rel="stylesheet" href="/css/admin_custom.css">
#routes
<!-- Scripts -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script src="/js/Chart.bundle.js"></script>
<script src="/js/OverlayScrollbars.min.js"></script>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
#inertia
</body>
</html>
1 common resources/js/app.js :
require('./bootstrap');
window.Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: false,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
require('#fortawesome/fontawesome-free/js/all.min.js');
// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import mitt from 'mitt';
window.emitter = mitt();
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
import Multiselect from '#vueform/multiselect'
import VueUploadComponent from 'vue-upload-component'
import Paginate from "vuejs-paginate-next";
const app = createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.component('inertia-link', Link)
.component('Paginate', Paginate)
.component('file-upload', VueUploadComponent)
.mixin({ methods: { route } })
.component('multiselect', Multiselect)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
also in admin/settings page I added “Clear Cache” button, clicking on it next commands are run :
\Artisan::call('config:cache');
\Artisan::call('route:cache');
\Artisan::call('cache:clear');
\Artisan::call('route:cache');
\Artisan::call('route:clear');
\Artisan::call('view:clear');
\Artisan::call('clear-compiled');
but clearing cache did not help with this problem.
Can it be that reason of this problem that I have 1 common resources/js/app.js both for admin area and frontend part?
Thanks!
Once I was faced same problem with inertia and that works for me. Usually that happened when you used multiple-layouts, as well as those layout have different style-scripts.
Reason (problem):
As you have used one layout for frontend-pages (public pages) and other one for admin-pages.
So when user visited front-pages, all style scripts of frontend-layout loaded and it's work fine and looks good.
But, when user switched to admin-layout that's layout style-scripts not loaded. So, On hard-refresh (Crtl+R) that URL the appropriate layout style-scripts got loaded.
I read many article to switch layouts on run-time every article gives same solutions as you did in HandleInertiaRequests.php.
Solution:
Then I come to a point where I need to switch layout on clicking some link I did hard-loading as shown in below snippet instead of redirection by inertia-link:
<a :href="route('home')">
Home
</a>
By this way appropriate layout style-script got loaded.
My Assumption:
Moreover, I've seen your site-source-code (Ctrl+U) as shown in screenshot. You haven't loaded style-scripts by Laravel asset() helper method.
I suggest to try once by loading scripts & style link in blade file by Laravel standard approach (using asset() method) that might be a problem.
Attach CSS sheet
<link href="{{ asset('frontend/css/bootstrap.min.css') }}" rel="stylesheet">
Attach JavaScript/jQuery scripts
<script src="{{ asset('frontend/js/jquery-3.5.1.min.js') }}"></script>
After using asset() method, your links in site-source-code (Ctrl+U)
looks something like that:
Note:
make sure you must set appropriate APP_URL in .env file.
Here is a HTML code that my teammate wrote that uses CSS/Bootstrap.
How do I render it in Django?
It works when I open the file as HTML but I am not able to render it in Django.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.min.css" rel="stylesheet">
in your settings put:
STATIC_URL = '/static/'
STATIC_ROOT = "path/to/your/static/folder"
in your root urls.py put after urlpatterns:
from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
and create static folder in your root folder of project, and copy all your static files there.
After that in your template:
{% load static %}
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
Use like this.
If you have another questions, please read:
https://docs.djangoproject.com/en/2.1/howto/static-files/
I am working on a Firestore, Vue project and having an issue with building my project. Running the non-built files on a local server works just fine and after running the build command, the files all appear to be correct. However, after uploading the files to Firebase (or creating a local server using the built files using the firebase serve command), it just shows a blank page. So I inspected the files and the css and js files are the exact same as the HTML file.
I know that this guy had the same issue, Upload to Firebase Hosting not working correctly, but I have gone through every file I feel like may be the culprit and still cannot find where the issue is — although that may just be due to my lack of knowledge in how webpack works. I think it may be some misconfiguration in the vue.config.js file but not sure. I would appreciate any help in getting my project hosted! Thanks!
Here is my file structure:
- dist
- src
- assets
- css
- img
- js
- favicon.ico
- index.html
- public
- index.html
- src
- App.vue
- main.ts
- .firebaserc
- firebase.json
- package.json
- vue.config.js
Compiled index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=msapplication-tap-highlight content=no>
<meta name=description content="Steel Tech of the Ozarks designs & manufactures pre-engineered metal buildings, driven by an intentional, no-compromise passion for excellence.">
<meta name=keywords content=steel,building,metal,structural,design,manufacture>
<title>Company Name</title>
<link rel="shortcut icon" href=../src/assets/favicon/favicon.ico>
<meta name=theme-color content=#6e8995>
<link as=style href=/dist/src/assets/css/app.64e0dd85.css rel=preload>
<link as=style href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=preload>
<link as=script href=/dist/src/assets/js/app.00d6273a.js rel=preload>
<link as=script href=/dist/src/assets/js/chunk-vendors.90527da6.js rel=preload>
<link href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=stylesheet>
<link href=/dist/src/assets/css/app.64e0dd85.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app>
<script src=/dist/src/assets/js/chunk-vendors.90527da6.js></script>
<script src=/dist/src/assets/js/app.00d6273a.js></script>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<title>Company Name</title>
<link rel="apple-touch-icon" sizes="180x180" href="../src/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../src/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../src/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="../src/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="../src/assets/favicon/safari-pinned-tab.svg" color="#ff6600">
<link rel="shortcut icon" href="../src/assets/favicon/favicon.ico">
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- Built files will be auto injected -->
<div id="app"/>
</body>
</html>
App.vue
<template>
<v-app>
<router-view/>
</v-app>
</template>
main.ts
import Vue from 'vue'
import App from './App.vue'
import router from '#/router'
import store from '#/store'
import '#/plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app')
.firebaserc
{
"projects": {
"default": "schedule-maxx"
}
}
firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
vue.config.js
module.exports = {
runtimeCompiler: true,
lintOnSave: true,
productionSourceMap: false,
outputDir: 'dist',
assetsDir: 'src/assets',
baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/api': '/api/v1'
}
}
}
}
}
With regards to your file structure, in particular:
dist
public
index.html
and to the fact that you rewrite to /index.html (cf. firebase.json file)
I think that your firebase.json file should start as follows. (However, since you don't show what's in the dist directory I am not 100% sure!):
{
"hosting": {
"public": "public",
....
}
}
and the static directory generated by webpack should also be deployed under the public directory. It is most probably under the dist directory for the moment.
It looks like I just had my vue.config.js file configured incorrectly. I changed the baseUrl field from '/dist/' to '.' and the file paths in the compiled files were correct.
Polymer PWA app works perfectly fine in MacBook Chrome, Windows Chrome, Android Chrome browser but shows blank screen in MacBook Safari, iPhone Safari and iPhone Chrome.
Zero Errors or Zero warnings shown in web inspector.
HTML page - index.html
<!doctype html>
<!-- declare file type -->
<html lang="en">
<head>
<meta content-type="text/javascript" charset="utf-8">
<meta name="generator" content="App">
<meta name="viewport" content="width=device-width, minimum-scale=1,
initial-scale=1, user-scalable=yes">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>MyApp</title>
<meta name="description" content="My App description">
<base href="/">
<link rel="shortcut icon" sizes="24x24" href="/images/6e156046-3456-
614b-4981-e136dfbf7d18.webPlatform.png">
<link rel="manifest" href="manifest.json">
<!-- Add to homescreen for Chrome on Android. Fallback for
manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="App">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-
translucent">
<meta name="apple-mobile-web-app-title" content="App">
<!-- Homescreen icons -->
<link rel='icon' sizes='192x192' href='/images/27ab6cb7-8da3-a597-
b536-2edff24c3ac6.webPlatform.png'>
<link rel="apple-touch-icon" href="/images/c9d9ff33-7849-0621-0359-
e5e70df7cbf8.webPlatform.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/31b30d4f-
08f3-4faa-1fc2-15642e70b367.webPlatform.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/32f6784e-
c13e-81a0-1721-594d5908c4ed.webPlatform.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/ece2893b-
2863-9dfc-afe6-9c2a2961e540.webPlatform.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/27ab6cb7-
8da3-a597-b536-2edff24c3ac6.webPlatform.png">
<!-- Tile icon for Windows 8 (144x144 tile color) -->
<meta name="msapplication-TileImage" content="/images/ece2893b-2863-
9dfc-afe6-9c2a2961e540.webPlatform.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<meta name="msapplication-square70x70logo"
content="/images/31b30d4f-08f3-4faa-1fc2-
15642e70b367.webPlatform.png">
<meta name="msapplication-square152x152logo"
content="/images/7ec23c59-18dd-0218-3cad-
09183db6b7a2.webPlatform.png">
<script>
window.Polymer = {rootPath: '/'};
// Load and register pre-caching Service Worker
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(function(registration) {
console.log('Service Worker Registered - ' +
registration.scope);
});
navigator.serviceWorker.ready.then(function(registration) {
console.log('Service Worker Ready');
});
}
</script>
<script>
if (!window.HTMLImports) {
HTMLImports={};
}
</script>
<link rel="import" href="bower_components/polymer/polymer-
element.html">
<link rel="import" href="bower_components/paper-toast/paper-
toast.html">
<link rel="import" href="bower_components/platinum-sw/platinum-sw-
cache.html">
<link rel="import" href="bower_components/platinum-sw/platinum-sw-
register.html">
<link rel="import" href="ice.html">
<!-- Load your application shell -->
<link rel="import" href="my-app.html">
<!-- Add any global styles for body, document, etc. -->
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.0;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body>
<paper-toast id="toast" text="Hi, welcome to BizRec!"></paper-
toast>
<my-app></my-app>
Bower.json -->
"dependencies": {
"app-layout": "PolymerElements/app-layout#^2.0.0",
"app-route": "PolymerElements/app-route#^2.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
"iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
"iron-pages": "PolymerElements/iron-pages#^2.0.0",
"iron-selector": "PolymerElements/iron-selector#^2.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.1",
"polymer": "Polymer/polymer#^2.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
"polymerfire": "firebase/polymerfire#^2.2.0",
"paper-button": "PolymerElements/paper-button#^2.0.0",
"paper-input": "PolymerElements/paper-input#^2.0.2",
"iron-icons": "PolymerElements/iron-icons#^2.0.1",
"iron-ajax": "PolymerElements/iron-ajax#^2.0.5",
"paper-card": "PolymerElements/paper-card#^2.0.0",
"paper-checkbox": "PolymerElements/paper-checkbox#^2.0.1",
"iron-localstorage": "PolymerElements/iron-localstorage#^2.0.0",
"paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
"paper-item": "PolymerElements/paper-item#^2.0.0",
"paper-toast": "PolymerElements/paper-toast#^2.0.0",
"paper-fab-speed-dial": "Collaborne/paper-fab-speed-dial#^2.3.1",
"paper-avatar": "NeilujD/paper-avatar#^2.0.1",
"app-toast": "jifalops/app-toast#^0.3.1",
"paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
"paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
"paper-tooltip": "PolymerElements/paper-tooltip#^2.0.1",
"neon-animation": "PolymerElements/neon-animation#^2.0.1",
"paper-toolbar": "PolymerElements/paper-toolbar#^2.0.0",
"iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^2.1.0",
"vaadin-date-picker": "vaadin/vaadin-date-picker#^2.0.4",
"d3-progress-meter": "Collaborne/d3-progress-meter#^1.1.1",
"paper-pulsating-progress": "Collaborne/paper-pulsating-progress#^2.0.2",
"paper-spinner": "PolymerElements/paper-spinner#^2.0.0",
"paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
"iron-collapse": "PolymerElements/iron-collapse#^2.0.0",
"platinum-sw": "PolymerElements/platinum-sw#^2.0.0"}
There seems to be some issue in html imports or rel link that I am not able to check. Has anyone had similar issues? any fix recommended.
I am using Firebase deploy command to host the PWA on firebase.
Thanks,
V
Google Chrome is currently the only browser that has a native support for web components features (templates, HTML imports, custom elements and shadow DOM). For the other browsers you need to include a polyfill (webcomponentsjs) before importing any web component.
<script src="webcomponents-lite.js"></script>
<link rel="import" src="my-element.html">
You can see browsers support for Polymer 1.0 here.
And for 2.0 here.
I have done my research with grunt-injector. However, I have not found anything explains simply enough the process of injecting some file to another by grunt-injector.
My index.html header:
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>SmartHome</title>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- build:css(client) styles/global.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/normalize.css/normalize.css" />
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/bower_components/nouislider/distribute/nouislider.min.css" />
<!-- endbower -->
<!-- endbuild -->
Everytime I run grunt serve, it would delete the
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
I have no idea why. My bower.json has included bootstrap ~3.3.4 as a dependency. I've tried numerous methods with bower install --dev etc... But no luck to get this link back.
So I think my last resort would be to use the grunt-injector function. Can anyone gives me a hint with the syntax needed ? My files structure:
/client/
---bower_components/
(somemore folders)
---bootstrap.css
index.html
For this task you can use: https://github.com/taptapship/wiredep
Example:
wiredep: {
task: {
// Point to the files that should be updated when
// you run `grunt wiredep`
src: [
'src/main/resources/view.html'
],
options: {
// See wiredep's configuration documentation for the options
// you may pass:
// https://github.com/taptapship/wiredep#configuration
}
}
}
injector: {
options: {
// Task-specific options go here.
},
bower_dependencies: {
files: {
'index.html': ['bower.json'],
}
}
}