In Astro.js after the build I get 3 separate CSS files:
<link rel="stylesheet" href="./assets/asset.d445157f.css" />
<link rel="stylesheet" href="./assets/asset.71926ed3.css" />
<link rel="stylesheet" href="./assets/asset.e5ceecbe.css" />
But what I want is to get only one file, e.g.:
<link rel="stylesheet" href="./assets/style.css" />
Is there any way to achieve that in Astro?
For now, I am scaling these 3 files manually into 1 after the build.
Here is how I solved it using Rollup config:
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({
output: 'static',
vite: {
build: {
rollupOptions: {
output: {
assetFileNames: 'assets/[name][extname]',
}
}
}
}
});
Related
I'm trying to setup Inertia to use in my Laravel project but it gives me errors? Where is my mistake?
I installed Inertia with this command
composer require inertiajs/inertia-laravel
followed the instructions on the github page and added #inertia to my app.blade.php like this:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="icon" type="image/jpg" href="{{asset("/image/logo2.png")}}">
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
#inertia
</body>
</html>
in my Login Controller
public function showLoginForm()
{
return Inertia::render('Auth/Login');
}
in my routes/web.php
Auth::routes();
Route::get('login', 'Auth\LoginController#showLoginForm')->name('login');
Route::post('login', 'Auth\LoginController#login');
This is the error I get:
the lines that is highlighted is the #inertia which show up as this
<div id="app" data-page="<?php echo e(json_encode($page)); ?>"></div>
What am i doing wrong?
#inertia blade directive is working but not rendered because you need to install the frontend adapter
npm install #inertiajs/inertia #inertiajs/inertia-vue
Set it up in webpack.mix.js
const mix = require('laravel-mix')
const path = require('path')
mix.js('resources/js/app.js', 'public/js')
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
And initialize it in Vue resources/js/app.js
import { InertiaApp } from '#inertiajs/inertia-vue'
import Vue from 'vue'
Vue.use(InertiaApp)
const app = document.getElementById('app')
const pages = {
'Auth/Login': require('./Pages/Auth/Login.vue').default,
}
new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => pages[name],
},
}),
}).$mount(app)
I used gulp and Laravel blade when run gulp,
Do I want thing?
I want {{ asset('/') }} append to perfix URL build
head-include.blade.php Before running gulp
<!-- build:css resources/assets/css/out.css -->
<link rel="stylesheet" href="resources/assets/css/1.css">
<link rel="stylesheet" href="resources/assets/css/2.css">
<!-- endbuild -->
gulpfiles.js
...
gulp.task('useref', function(){
return gulp.src(paths.assets.html)
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest(paths.dev.html))
});
...
head-include.blade.php After running gulp
<link rel="stylesheet" href="resources/assets/css/out.css">
But i want it:
i want {{ asset('/') }} append to perfix url build
head-include.blade.php I want ..
<link rel="stylesheet" href="{{ asset('/') }} resources/assets/css/out.css">
install gulp-replace
npm install gulp-replace --save-dev
replace = require('gulp-replace');
gulp.task('useref', function(){
return gulp.src(paths.assets.view)
.pipe(replace("{{ asset('resources/assets') }}", 'resources/assets'))
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest(paths.dev.view))
.pipe(replace('../assets', "{{ asset('resources/assets') }}"))
.pipe(gulp.dest(paths.dev.view))
});
<!-- build:css(./) resources/assets/css/out.css -->
<link rel="stylesheet" href="{{ asset('resources/assets') }}/css/1.css">
<link rel="stylesheet" href="{{ asset('resources/assets') }}/css/2.css">
<!-- endbuild -->
I am using a angular app which is working fine locally, using
foreman start -p 9000 web
also using
grunt serve
when deploying to heroic, I am getting errors on missing css files. One example
https://rc-batchentry-dev.herokuapp.com/components/batch-review.css Failed to load resource: the server responded with a status of 404 (Not Found)
I am using grunt build tool.
web.js (relevant section)
// Static files
if (/development/.test(app.get('env'))) {
console.log('ENVIRONMENT: development');
app.use('/', express.static(__dirname + '/app'));
app.use('/', express.static(__dirname + '/.tmp'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
}
if (/production/.test(app.get('env'))) {
console.log('ENVIRONMENT: production');
app.use(express.static(__dirname + '/dist'));
}
// Start the server
app.listen(process.env.PORT || 9000, function () {
console.log('App started:', app.get('env'));
});
index.html
css section only:
<link rel="stylesheet" href="app.css"></link>
<link rel="stylesheet" href="bootstrap.css"></link>
<link rel="stylesheet" href="components/batch-delete.css"></link>
<link rel="stylesheet" href="components/batch-design.css"></link>
<link rel="stylesheet" href="components/batch-edit.css"></link>
<link rel="stylesheet" href="components/batch-import.css"></link>
<link rel="stylesheet" href="components/batch-review.css"></link>
<link rel="stylesheet" href="components/batch-revisions.css"></link>
<link rel="stylesheet" href="components/batch-view.css"></link>
<link rel="stylesheet" href="components/batches.css"></link>
<link rel="stylesheet" href="components/monitor.css"></link>
<link rel="stylesheet" href="components/unsupported.css"></link>
heroku config:set NODE_ENV=production
The above environment setting resolved it, when I looked at the heroku logs it was pointing to development.
I'm trying to render external stylesheets. I'm not sure why this is not working:
GO:
func main() {
http.HandleFunc("/", homeHandler)
http.HandleFunc("/image/", imageHandler)
http.Handle("/layout/", http.StripPrefix("/layout/", http.FileServer(http.Dir("layout"))))
http.ListenAndServe(":8000", nil)
}
Dir structure:
gocode
layout
stylesheets
home.css
home.html
main.go
HTML:
<link rel="stylesheet" type="text/css" href="/stylesheets/home.css" />
Whats wrong? I followed the example here: Rendering CSS in a Go Web Application
Your file server is at /layout/, so it should be
<link rel="stylesheet" type="text/css" href="/layout/stylesheets/home.css" />
I am developing an asp.net mvc application and I use this template for my app. For js and css resources, I use URL.Content helper method, but the problem is that css resources referenced by template loads only in home/index action and when I go to other action, browser consoles says that it cant find the resources.
Here is what I have in my _layout.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/js/config.js")"></script>
<script src="#Url.Content("~/js/skel.min.js")"></script>
<script src="#Url.Content("~/js/skel-panels.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<noscript>
<link rel="stylesheet" href="#Url.Content("~/css/skel-noscript.css")"/>
<link rel="stylesheet" href="#Url.Content("~/css/style.css")" />
<link rel="stylesheet" href="#Url.Content("~/css/style-desktop.css")" />
</noscript>
Here is what I can see in chrome Element tab:
<script src="/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/js/config.js"></script>
<script src="/js/skel.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style-desktop.css">
<script src="/js/skel-panels.min.js"></script>
<style type="text/css"></style>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<noscript>
<link rel="stylesheet" href="/css/skel-noscript.css"/>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/style-desktop.css" />
</noscript>
And here is the error I got from console in broswer:
GET http:///myapp/test/css/style-desktop.css 404 (Not Found) skel.min.js:1
GET http://myapp/test/css/style.css 404 (Not Found) skel.min.js:1
All you have to do is set the "prefix" in "_skel_config" obj. to the right path of your styles.
window._skel_config = {
prefix: 'css/style',
};
Alaasdk is right, most of similar templates using skelJS come with something like this:
window._skel_config = {
prefix: '/css/style'
}
in their js/config.js file. So if you have controllers that handle URLs like this:
domain/users/10
domain/category/subcategory/article-slug
or similar, you only set it to relative URL like
prefix: '/css/style'
The stylesheet links you have in your snippet are in a <noscript> block and only apply to users who have javascript turned off.
As #marcus33cz and #alaasdk point out, you set the relative path in config.js.
In the latest version of skel, you set it in init.js like this:
global: { href: '/css/style.css', containers: 1400, grid: { gutters: ['2em', 0] } },
desktop: { media: '(max-width: 1680px)', href: '/css/style-desktop.css', containers: 1200 },
// and so on for all of your stylesheets