I'm trying to use a theme which I bought from themeforest with Laravel
I have already use mix.copy to move my fonts from node_modules to my public dir, this works fine./
However when I include the following lines in my webpack.mix file,
mix.less('node_modules/elite-theme/eliteadmin-dark/less/style.less', 'public/css', './');
I get the following errors
Any idea what I am doing wrong here?
Never mind seems like this is doing the trick
mix.options({
processCssUrls: false
});
Set to false to take urls as they are
Related
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 am running Laravel 5.4 and using Laravel Mix to compile my assets. I have two SASS files for production. However, one of them needs to be compiled from SASS to CSS without minifying. I don't see how to do that. Here's what I have in my webpack.mix.js file:
mix.js(
[
'resources/assets/js/app.js',
],
'public/assets/js'
)
.sass(
'resources/assets/sass/app.scss',
'public/assets/css'
)
.sass(
'resources/assets/sass/pdf.scss',
'public/assets/css',
)
.version();
Now, the pdf.scss file is the one that needs to be "un-minified" for production. Is there any way to do so?
Thanks for answers!
Hi I found a solution to do this.
mix.sass("src/app.scss", "dist/", {
sassOptions: {
outputStyle: 'expanded',
},
})
sassOption help you to add some features to sass file.you can see all option here".
When you set the value of outputStyle equal to expanded, this will prevent the compression of SCSS files from damaging them. Of course, by doing this, the files will be compressed again.
So I am using Laravel-Mix and have set up code splitting in Webpack. I am using a dynamic import for my Vue components like this.
Vue.component('UserMenu', () => import('./components/UserMenu.vue'));
Since I am also using Babel, I have the syntax-dynamic-import plugin loading from my .babelrc file in the project root.
This is all working fine, and Webpack is properly splitting the code on build. However, the problem is, it is putting the chunks in the public root rather than in public/js
If in my webpack.mix.js I do...
mix.js('resources/assets/js/app.js', 'public/js');
...then the mix properly places the built file in the /js directory.
But in order to chunk the files, if in webpack.mix.js I do...
mix.webpackConfig({
entry: {
app: './resources/assets/js/app.js',
},
output: {
filename: '[name].js',
publicPath: 'public/js',
}
});
...all the chunks get put in the public root no matter what I assign to the publicPath property.
Any idea what am I missing here?
Try to set public path using mix.setPublicPath('public/build') method.
just change the chunk path in webpack.mix.js under your laravel root folder,
mix.webpackConfig({
output: {
filename:'js/main/[name].js',
chunkFilename: 'js/chunks/[name].js',
},
});
also note that the laravel way of changing main js location is using mix.js function
mix.js('resources/assets/js/app.js', 'public/js/main')
I am struggling with webpack. I want to have the compiled files in public-cdn folder. However, the following code creates files in several different locations. Including E:\cdn. Chunks, app.js, css files - everything in different location.
Paths:
main folder: www/Project
laravel public: www/Project/public
cdn folder: www/Project/public-cdn
webpack.mix.js
mix.webpackConfig({
output : {
path : '/public-cdn/',
publicPath : 'http://cdn.ywg.localhost/',
chunkFilename : 'js/[name].js'
},
});
mix.sass('resources/assets/sass/styles.scss', '../public-cdn/css')
.options({processCssUrls: false
});
mix.sass('resources/assets/sass/invoice.scss', '../public-cdn/css')
.options({processCssUrls: false
});
mix.js('resources/assets/js/frontApps.js', '../public-cdn/js')
.extract(['vue']);
I tried experimenting with Path and PublicPath parameters. PublicPath doesn't seem to work at all.
After some more experimenting, I think I found a solution. The issue might be caused by laravel mix which set's the "public" folder.
I added:
mix.setPublicPath('public-cdn/');
and it seems to be working well now.
I have my Bower vendor directory at resources/assets/vendor.
In my gulpfile, I've tried the following:
mix.scripts([
"vendor/jquery/dist/jquery.min.js"
], "public/js");
When I run gulp in terminal, it doesn't seem to do anything. No errors though.
I also tried this:
mix.copy('vendor/jquery/dist/jquery.min.js', 'public/js/jquery.js');
To no avail.
What am I missing?
update & solution
Only sass,less and coffee scripts are by default looked for in resources/assets/[sass/coffee/less] while JS files are simply in resources/js which confused me. Beware.
First of all, we don't know location of your jquery.min.js file. However the default location for scripts files is resources/js so to make it work, you should have your jquery.min.js file in resources/js/vendor/jquery/dist/jquery.min.js.
As 2nd argument you should pass your target filename with path, so it should be for example:
mix.scripts([
"vendor/jquery/dist/jquery.min.js"
], "public/js/jquery.min.js");
assuming as I mentioned at the beginning you have this JS file in resources/js/vendor/jquery/dist/jquery.min.js location
If you don't, you should use 3rd parameter. So in this case, if your JS file is really in "vendor/jquery/dist/jquery.min.js" location, you could use:
mix.scripts([
"jquery.min.js"
], "public/js/jquery.min.js", "vendor/jquery/dist");
to make it work.
EDIT
After explaining in comments, you should use then:
mix.scripts([
"vendor/jquery/dist/jquery.min.js"
], "public/js/jquery.min.js", "resources/assets/js");