Source maps for all CSS file referenced in resources/css/app.css

When I run npm run dev or watch I can only get chrome devtools to reference CSS in app.css.

I would prefer it to reference the individual css files I have included in resources/css/app.css Is this possible to do? I'm new to webpack and am struggling to find a good key work to use in google search to get the correct results.

In resources/css/app.css I have the following

@import "styleHead.css";
@import "bootstrap.min.css";
@import "bootstrap-overide.css";
@import "gtdb.css";
@import "style.css";

// I have also tried this but same results. 

@import "../../public/css/styleHead.css";
@import "../../public/css/bootstrap.min.css";
@import "../../public/css/bootstrap-overide.css";
@import "../../public/css/gtdb.css";
@import "../../public/css/style.css";

In webpack.mix.js I have

mix.options({
    purifyCss: true,
});

mix.webpackConfig({
    devtool: 'inline-source-map',
});

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [])
    .options({
        processCssUrls: false,
    });

warmwhisky

4 years ago

Level 1

I feel like this must be a rookie mistake on my part.

How can one get Chrome to show sources files instead of compiled app.css? I'm sure this must be possible as how else would I develop my css files?

warmwhisky

4 years ago

Level 1

8 hours of Laravel Mix not generating source maps and what seems like a hundred GitHub issues, blog posts, forum past and still nothing.

Why is it so difficult to do the most basic thing in Laravel Mix?

Rant over... I give up

warmwhisky

4 years ago

Level 1

After a blast on devrant I feel better and have figured it out as follows

// webpack.mix.js

// this gives me sources maps, purges CSS, ignores CSS urls and cleans up CSS in dev mode

let mix = require('laravel-mix');

require('laravel-mix-purgecss');

require('laravel-mix-clean-css');

let productionSourceMaps = false;

mix.combine([
    "public/js/js-file1.js",
    "public/js/js-file2.js"
    ], 'public/js/app.js')

    .sourceMaps(productionSourceMaps, 'source-map')

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

    // Run clean-css on all stylesheets
    .cleanCss({
        level: 2,
        format: mix.inProduction() ? false : 'beautify' // Beautify only in dev mode
    })

    .options({
        processCssUrls: false,
    })

    .purgeCss({
        enabled: true,
    })

    .version();

// resources/assets/sass/app.scss

@import "../../../public/css/css-file1.css";
@import "../../../public/css/css-file2.css";

Very pleased with the results. I've tried to learn mix on a few occasions, but it seems its one of those things you need to trawl through to get anywhere. Unexpected error after error that leads down a rabbit hole can be so discouraging, but yeah, I made it. May the lord open!

Please or to participate in this conversation.