I'm trying to compile a css file with Laravel-mix but for some reason when i try to include the file in the header the page is blank with no errors.
webpack.mix.js
const mix = require('laravel-mix');
require('vuetifyjs-mix-extension')
require('laravel-mix-purgecss');
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader').vue()
.sass('resources/sass/app.scss', 'public/css').purgeCss()
.postCss('../assets/css/custom.css', 'public/css', [
cssImport(),
cssNesting(),
require('tailwindcss'),
]).purgeCss()
importing it in the header
<link href="{{ mix('css/custom.css', 'core/public') }}" rel="stylesheet"/>
the file gets included in the header correctly also i can look at the file and it's contents, also CSS is applied as far as i can tell looking at the body.
**Edit
Most CSS doesn't get compiled and it's missing from the file which gets generated from webpack
package.json
"laravel-mix": "^6.0.27",
"laravel-mix-purgecss": "^6.0.0",
Laravel Version 5.8
**Edit
I found out why the page is blank, it's a Vuetify issue where v-app is covering the page, i had set this CSS property inside the file which fixed this issue
div > .v-application--wrap {
min-height: auto !important;
}
The problem is this CSS property is missing in the compiled webpack file.
Related
after npm run prod for production in laravel, do I need to upload mix.manifest.json along app.css and app.js to shared hot or not?
the mix.manifest.json file will change to :
{
"/js/app.js": "/js/app.js?id=b891664151c01b268197",
"/css/app.css": "/css/app.css?id=4b5a5b36ae9495db0146"
}
but no such files in public, uploading just app.css and app.js is enough?
and is my code correct for versioning in production and development?
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
if (mix.inProduction()) {
mix.version();
}
You will also have to copy mix.manifest.json to your public folder along with app.css and app.js. Mix.manifest.json is where Laravel looks to get the version number. You will also have to change how you grab your css and js files in your app.blade.php so it looks like this:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
I'm using Laravel 5.7 and i'm applying AMP to our website. (https://amp.dev/).
I'm folowing these steps to convert HTML to AMP: https://amp.dev/documentation/guides-and-tutorials/start/converting/?format=websites
One of the requirements is to replace external stylesheets to internal stylesheets (https://amp.dev/documentation/guides-and-tutorials/start/converting/resolving-errors?format=websites#replace-external-stylesheets). I've done this by doing the following code below:
<style amp-custom>
{!! file_get_contents(public_path('css/app.css')) !!}
</style>
I'm using Sass and I'm using Laravel mix to compile my assets.
This is my webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
.version();
But upon doing this I've encountered an error in the AMP:
CSS syntax error in tag 'style amp-custom' - saw invalid at rule '#charset'.
To solve this problem, I must remove the #charset "UTF-8"; in the compiled css css/app.css. And it seems that running npm run dev, its automatically adding #charset "UTF-8"; at the top of the file. How do I remove this?
I'm thinking that I have to add some code in the webpack.mix.js to remove that. But I don't have an idea how to do this.
Yep! SASS adds this directive if your SASS contains any extended (e.g., not standard ASCII) characters. There's an open issue in the SASS project to provide an option to not do this... but they've said they won't provide that option.
For now, it's pretty easy to fix... simply add a step that your build process that hunts for #charset "UTF-8"; and removes it. You can see how I did it here:
https://github.com/ampproject/samples/blob/master/amp-camp/gulpfile.js#L63
gulp.task('styles', function buildStyles() {
const cssEncodingDirective = '#charset "UTF-8";';
return gulp.src(paths.css.src)
... (stuff removed)
.pipe(options.env === 'dev' ? replace(cssEncodingDirective, '') : noop())
... (more stuff removed)
});
If you run 'npm run production', that line will be deleted automatically and you will not get an error in AMP validation.
I have installed datatables with npm by help of this doc, now I'm not sure how I can add datatables css and js files to my app.css and app.js
Downloaded files by NPM
Code
my webpack.mix.js
const mix = require('laravel-mix');
//laravel default to make app.css and app.js
// I want add Datatables to these files
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
//my template files
mix.combine([
'public/theme/primary/js/jquery.min.js',
'public/theme/primary/js/popper.min.js',
'public/theme/primary/js/bootstrap.min.js',
'public/theme/primary/js/uza.bundle.js',
'public/theme/primary/js/default-assets/active.js'
], 'public/js/combined.js');
Any idea?
Solved
I added this code to my bootstrap.js under require('bootstrap');
require( '../../node_modules/datatables.net/js/jquery.dataTables.js' );
require( '../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js' );
and then added styles to my app.scss
#import '~datatables.net-bs4/css/dataTables.bootstrap4.css';
Everything works perfectly now.
Hope it help others.
To combine multiple scripts and styles you can do it this way:
mix.scripts([
'node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js',
'resources/js/app.js'
])
.styles([
'node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css',
'resources/sass/app.scss'
]);
This by default should create all.js and all.css files in the respective js and css public folders.
I have been able to get this to work on just a basic vue application but I am having trouble bringing it across to laravel vue. I was able to add module in vue.config.js in the vue application that would import any scss files i added. Using the same code in the laravel vue app in the webpack.mix.js file it is not compiling correctly. This is my webpack.mis.js file:
let mix = require('laravel-mix');
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "./resources/assets/sass/variables.scss";`
}
}
}
};
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I have also attempted the other configurations suggested from the docs but I haven't succeeded. I have also seen a lot of answers suggesting to just include the relative path to the files I wish to include in every component but this is inefficient and error prone as the application develops. There must be a way to achieve this and I have just got the configuration incorrect.
Any advice is appreciated, thanks.
Laravel Mix has an option exactly for this. It's globalVueStyles.
Check out the documentation: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md.
It will only work with extractVueStyles active:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
extractVueStyles: true,
globalVueStyles: 'resources/sass/_variables.scss',
})
.version();
im using Larverl 5.5 with Laravel Mix 1.0. All of my images are stored in public/images, fonts are in public/fonts. The problem is if my Laravel project is inside sub folder like htdocs/demo/laravel, all the images and fonts url cannot be found in scss files. For e.g:
app.scss
// Bootstrap
#import "~bootstrap-sass/assets/stylesheets/bootstrap";
// Font
#import "components/fonts";
// Font Awesome
#import "~font-awesome/scss/font-awesome.scss";
wrapper {
.banner {
background: url('/images/banner.png') no-repeat;
background-size: cover;
}
}
fonts.scss (inside fonts/components folder)
#font-face {
font-family: MyFont;
font-weight: normal;
font-style: normal;
src: url("/fonts/MyFont.eot");
src: url("/fonts/MyFont.ttf") format("truetype"),
url("/fonts/MyFont.woff") format("woff");
}
I also install font awesome and boostrap by npm and suffer the same problem with font.
Here is my webpack.mix.js
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Update 1:
The problem with fonts was solve by add this to webpack.mix.js:
mix.setPublicPath('public/');
mix.setResourceRoot('../');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Now the problem remains is the background image on scss file. It still points to "/images/banner.png" instead of "../images/banner.png" in app.css after run "npm run dev"
Update 2:
I was wrong, the problem with fonts still remain, only font awesome got correct path "../fonts", MyFont still points to "/fonts"
Open your webpack.mix.js file inside the app folder and add these lines:
mix.setPublicPath('public');
mix.setResourceRoot('../');
And then run: npm run dev.
It will work.