How to can I sync changes in Chrome DevTools "Styles" pane to original Source for a webpack website?

Question

The Problem

I am working on a website that uses webpack. I added the source folder as a Workspace on Google DevTools, and all files are mapped correctly. I can make changes on "Sources" panel on DevTools and original files are automatically updated when saved, as expected. However, changes made on "Styles" pane under "Elements" panel are ignored and doesn't update the original file. All changes are lost on page refresh.

What I tried

All below are enabled in DevTools settings. I tried toggling them on/off, restarted DevTools, to no avail.

• Preferences > ✅ Enable CSS source maps
• Experiments > ✅ Sync CSS changes in the Styles pane

I also tested the behavior on a separate non-bundled plain html/js/css website, and the changes in the styles pane updated the original file as expected.

Some info on versions:

• Chrome v119.0.6045.123
• vue.config.js

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "/Prototypes/" : "/",
    css: {
        sourceMap: true,
        extract: process.env.NODE_ENV === 'development' ? false : true,
    },
    configureWebpack: {
        devtool: 'source-map',
    },
};

Any solutions to this issue? I am a designer/coder and I find the "Styles" panel extremely vital on my projects to make css changes in a WYSIWYG fashion. Some thoughts:

• Is this a Chrome DevTools bug?
• Can I get around this by non-bundling, minimizing or source-mapping CSS files in anyway?

Answer 1

I just published a new package aiming to solve this issue.

Here is a demo implementation that can be run in your webpack config file or otherwise. You can tweak to suit your needs. Note the process is independent from webpack, so you will not be compiling any of your styles with webpack, instead you can use my compiler ;)

Actually... webpack still would need a bit of config saying that you want to export the compiled styles into your dist directory...

After you are running the script in development mode and you have setup livereload correctly, it should achieve what you need.

/**
 * Sample usage of ThemesCompiler.
 * The script will act based upon the --mode passed, which can be either `development` or `production`.
 * You can have a script in your package.json that runs this file with the `--mode` flag.
 * E.g. `node ./scripts/compile.js --mode=production`.
 */
const arpadroidThemes = require('arpadroid-themes');

const argv = require('yargs').argv;
const mode = argv.mode === 'production' ? 'production' : 'development';
const cwd = process.cwd();
const basePath = cwd + '/demo/css/themes';
// We instantiate the themes compiler.
const compiler = new arpadroidThemes.ThemesCompiler({
    themes: [
        { path: basePath + '/default' },
        { path: basePath + '/mobile' },
        { path: basePath + '/desktop' },
        { path: basePath + '/dark' }
    ],
    patterns: [cwd + '/demo/css/components/**/*', cwd + '/demo/css/pages/**/*'],
    minify: mode === 'production',
});

// We wait until the compiler is ready.
compiler.promise.then(() => {
    // We clean up the output directory of each theme before compiling.
    compiler.cleanup();
    // We compile of all themes.
    compiler.compile().then(() => {
        if (mode === 'development') {
            // We watch all files for changes and recompile the themes correspondingly.
            compiler.watch();
        }
    });
});

Please do read the docs in GitHub and checkout the demo included in the package. Hopefully things are not too hard to setup.

https://github.com/arpadroid/themes https://www.npmjs.com/package/arpadroid-themes