Laravel Compiling Assets: Working With Stylesheets

Less

Mix.less('resources/less/app.less', 'public/css');

Mix.less('resources/less/app.less', 'public/css')
   .less('resources/less/admin.less', 'public/css');

Mix.less('resources/less/app.less', 'public/stylesheets/styles.css');

Mix.less('resources/less/app.less', 'public/css', {
    strictMath: true
});

Sass

Mix.sass('resources/sass/app.scss', 'public/css');

Mix.sass('resources/sass/app.sass', 'public/css')
   .sass('resources/sass/admin.sass', 'public/css/admin');

Mix.sass('resources/sass/app.sass', 'public/css', {
    precision: 5
});

Stylus

Mix.stylus('resources/stylus/app.styl', 'public/css');

Mix.stylus('resources/stylus/app.styl', 'public/css', {
    use: [
        require('rupture')()
    ]
});

PostCSS

A powerful tool for transforming your CSS, is included with Laravel Mix out of the box.

Mix.sass('resources/sass/app.scss', 'public/css')
   .options({
        postCss: [
            require('postcss-css-variables')()
        ]
   });

Plain CSS

Mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

URL Processing

.example {
    background: url('../images/example.png');
}

.example {
  background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}

Mix.sass('resources/app/app.scss', 'public/css')
   .options({
      processCssUrls: false
   });

.example {
    background: url("../images/thing.png");
}

Absolute paths for any given url() will be excluded from URL-rewriting.

Source Maps

Though it comes with a compile/performance cost, this will provide extra debugging information to your browser's developer tools when using compiled assets.

Mix.js('resources/js/app.js', 'public/js')
   .sourceMaps();

Related concepts

Laravel Compiling Assets

→

Working With Stylesheets

→