I've been trying to compile two less files using Laravel's elixir.
In my gulpfile.js 'm doing :
elixir(function(mix) {
mix.less([
'app.less',
'soul.less'
]);
});
After running gulp, 'm only able to generate app.css and app.css.map in my 'public/css/' directory.
But i am not able to find the soul.css and soul.css.map. When i open a page with soul.css linked, the styles are being applied but the soul.css file cannot be found.
Any fix ?
Thanks
After Laravel 5.1 has been released you need to set the output path for files otherwise they will get combined by default.
elixir(function(mix) {
mix.less('app.less', 'public/css/app.css')
.less('soul.less', 'public/css/soul.css');
});
Related
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.
I want to setup Laravel Mix with mix.sass AND PostCss Critical CSS splitting. In the end I want two files: app.css and app-critical.css.
Unfortunately I can get this to work. One of the setups (webpack.mix.js) I did try:
mix
.js('templates/src/js/app.js', 'web/assets/dist/')
.js('templates/src/js/home.js', 'web/assets/dist/')
.extract(['vue','axios','lazysizes','svgxuse', 'fontfaceobserver'], 'web/assets/dist/vendor.js')
.sass('templates/src/scss/app.scss', 'web/assets/dist/')
.sourceMaps()
.options({
postCss: [
require('postcss-critical-css')({
preserve: false,
minify: false
})
]
})
.browserSync({
proxy: '127.0.0.1:8080',
files: [
'templates/**/*.twig',
'templates/src/js/**/*',
'templates/src/scss/**/*'
]
});
if (mix.inProduction()) {
console.log("In production");
mix.version();
}
When I run the script via 'npm run watch' I get an error:
10% building modules 0/1 modules 1 active ...ign-tools/templates/src/scss/app.scssWithout `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
Also, my file is just copying over all the critical styling. The file grows bigger and bigger, expanding the duplicate code everytime the input SCSS/CSS-file changes.
I did try to set up Laravel Mix + mix.sass + one of the following plugins:
https://github.com/zgreen/postcss-critical-css
https://www.npmjs.com/package/postcss-critical-split
Without success :(
Anybody with a working setup or link to an example repository?
Thanks,
Teun
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.
Is there actually a Jade template engine for Laravel5?
Jade code would be much easier to develop with, and - it would produce a compact HTML code.
I am new to Laravel since today, figuring out the same question you have.
I think there are two different approches:
Compiling via build tools
First you could use npm, gulp and elixir - witch both come with Laravel.
Therefore you have to have npm and gulp installed (I assume you already have).
Use the laravel-elixir-jade module via
npm i --save-dev laravel-elixir-jade
After adding a couple of lines in your gulpfile you can run the default task via
gulp
Here is an example of an elixir function inside the gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-jade');
elixir(function(mix) {
mix.less('app.less')
.jade({
baseDir: './resources',
blade: true,
dest: '/views/',
pretty: true,
search: '**/*.jade',
src: '/jade/'
});
});
Dont forget the require('laravel-elixir-jade'); at the beginning.
Compiling at server-side
You also have the possibility to let the PHP-Server render your jade files while rendering the page. I have created a package called mhochm/laravel-jadephp could be the right module for you.
I promise:
Create views as always but in Jade syntax
Require this package with composer:
composer require mhochm/laravel-jadephp
Add the ServiceProvider to the providers array in config/app.php:
'mhochm\LaravelJadePHP\LaravelJadePHPServiceProvider',
I hope this will help you :)
Moses
I am relatively new to gulp. I have one issue when I try to compile one directory with subfolders with their sass files.
Folder structure:
|_sass
|__folder1
| |_file.sass
|__folder2
| |_file.sass
|__folder3
|_file.sass
My simple gulp task to try the compilation
gulp.task('sass', function(){
return sass('sass/')
.pipe(gulp.dest('css');
}
This task above doesn't work with a folder but if I specify the file like in gulp task below, it works correctly.
gulp.task('sass', function(){
return sass('sass/folder1/file1.sass')
.pipe(gulp.dest('css');
}
I have checked the documentation of the repository (gulp-ruby-sass) and other topics in stackoverflow and the one solution that i have found is import all sass code into one file and compile it.
I have tried different paths: ./sass, sass, sass/ even the last syntax with gulp.src(path/**/*.sass) with gulp-sass repository as well.
Can you help me?
Thanks in advance
Edit: Using gulp-sass, not gulp-ruby-sass, since gulp-ruby-sass does only support single files, as mentioned in the docs:
gulp-ruby-sass doesn't support globs yet, only single files or directories. Just like Sass.
You should create a stream with valid glob arguments gulp.src() instead of just calling sass() directly and call it in a pipe():
gulp.task('sass', function (){
return gulp.src([
'sass/folder1/file.sass',
'sass/folder2/file.sass',
'sass/folder3/file.sass'
])
.pipe(sass())
.pipe(gulp.dest('css'));
});
If the files you just want to import are named correctly (starting with an underscore), this should work as well:
gulp.task('sass', function (){
return gulp.src('sass/**/*.sass')
.pipe(sass())
.pipe(gulp.dest('css'));
});
Edit: Fixed some code errors - SO needs a linter (;