File-loader and screen resizing questions

[demianrenzulli]

Hi,

I've been trying this plugin, and have the following questions:

1. Using MediaQueryPlugin with file-loader:

I'm using file-loader to resolve references to images in my CSS files, so that they can be emitted to the output directory after Webpack runs.
Before using media query plugin, Webpack would recognize the references to images inside media queries in the main.css file, and place the images in the public directory correctly.
After adding media query plugin to my webpack config, Webpack separated media queries into its own CSS files correctly, but the references to images inside those media queries don't seem to be recognized anymore, so the image output folder is not created in my "/public" directory.

I managed to solve this by importing images using:

require.context("./img/", true, /\.(png|svg|jpg|gif)$/);

But would have expected them to be resolved automatically.

2. Screen resizing:

The behavior I was looking for is that the page would request a different CSS when reaching a new breakpoint.
This can be done by using something like:

<link rel="stylesheet" media="(max-width:480px)" href="main-mobile.css">

In that case, the file will be loaded in a non-blocking way, and with lower priority, when the screen has a different size, but be available when the screen changes so it can be used.

Following the instructions for using extracted files, the page does load the right CSS at page load time, according to the viewport of the requesting device, but doesn't request a different stylesheet dynamically when the viewport changes.

Wondering if there's any better way of doing this, without using the link rel tag shared before.

Here's the content of webpack.config.js:

const path = require("path");

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const MediaQueryPlugin = require('media-query-plugin');

module.exports = {
    mode: 'production',
    entry: {
        main: "./src"
    },
    output: {
        path: path.resolve(__dirname, "public"),
        filename: "[name].bundle.js",
    },
    module: {
        rules: [{
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/'
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", MediaQueryPlugin.loader, "postcss-loader"]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: "./src/index.html" }),
        new MediaQueryPlugin({ include: ['style'], queries: { '(max-width: 480px)': 'mobile', '(min-width: 481px) and (max-width: 1024px)': 'tablet', '(min-width: 1025px)': 'desktop' }, groups: { main: ['style'] } }),
        new MiniCssExtractPlugin({ filename: "[name].css" })
    ]
}

And this is the main css file:

@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(https://fonts.gstatic.com/s/dancingscript/v10/If2RXTr6YS-zF4S-kcSWSVi_szLgiuEHiC4W.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body { 
  min-height: 100%; 
}

body {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

header {
    text-align: center;
}

h1 {
    font-family: 'Dancing Script', cursive;
    color: #fff;
    font-size: 60px;
    padding-top: 20px;
    margin-top: 0;
    padding-top: 20px;
}

h3 {
  font-family: 'Dancing Script', cursive;
  font-size: 40px;
}

.btn-custom {
    text-transform: uppercase;
    color: #fff;
    background-color: #3498DB;
    border: 0;
    padding: 14px 20px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
    border-radius: 0;
    transition: all 0.5s;
    margin-top: 20px;
}

@media (max-width: 480px) {
    body {
        background-image: url(./img/background-mobile.jpg);
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(./img/background-tablet.jpg);
    }
}

@media (min-width: 1025px) {
	body {
		background-image: url(./img/background-desktop.jpg);
	}
}

Thanks in advance.

[SassNinja]

Hi @demianrenzulli

thanks for your issue!

1. file loader

I have to check this myself... thinking about url loader as a solution but needs to be tested

2. viewport specific loading

If you wanna load dynamically the extracted CSS once the viewport has changed you can add an event listener. Here's a quick example (probably needs some polishing but you should get the idea):

let exampleDesktop = false; // ensure calling import only once

function checkViewport() {
  if (exampleDesktop === false && window.innerWidth >= 960) {
    exampleDesktop = true;
    import(/* webpackChunkName: 'example-desktop' */ './example-desktop.scss');
  }
}

window.onresize = checkViewport; // check on resize
checkViewport(); // initial check

[SassNinja]

The file-loaader problem is definitely a bug.
I've found out now loaders get applied to the media chunks. Not sure how easily this can be fixed... needs more research.

I'll postpone this to 2.0.0

[demianrenzulli]

Thanks for confirming!

[Andreew4x4]

Hi,
I'm having the same issue.
Extracted files (media-query once) are not processed by file_loader, and path is not changed (names not hashed etc.)
So +1 from me