loading css by RequireJS with Webpack

Question

how force webpack to treat this requirejs css loading syntax: 'css!./style'

from AMD requirejs module definition:

    define(['./bar3.js', 'css!./style'], function(bar3) {

with "style-loader!css-loader!" it works like:

    define(['./bar3.js', 'style-loader!css-loader!./style'], function(bar3) {

I've a try to resolve it with resolveLoader :

    resolveLoader: {
            alias: { 
                "css": "css-loader"
            }
    },

but can't find a solution for adding more than one, something like:

"css": ["style-loader!", "css-loader"]

webdevinci webdevinci · Accepted Answer · 2018-09-20T17:24:17

After searching for the answer a similar problem (we are moving from requirejs to webpack, but loading in .css files via css-loader), I found that this was the most efficient, easiest way to make the switch:

// 'classic_skin' being the alias of the file loaded
import(/* webpackMode: "eager" */ `classic_skin`).then( (ClassicSkin) => {
    // Callback Logic
});

Leads up to the idea of dynamic imports

https://medium.com/front-end-hacking/webpack-and-dynamic-imports-doing-it-right-72549ff49234

loading css by RequireJS with Webpack

1 Answers