After some tinkering, I have managed to get CSS modules loaded into a Dash component. It does require completely overriding the webpack configuration from dash-components-archetype
.
Copy the webpack config directory from node_modules/dash-components-archetype/config
to a config
folder in your root directory.
In config/webpack/partials
add a new file, styles.js
, and add the following content:
'use strict';
var path = require('path');
var partial = require('webpack-partial').default;
var ROOT = process.cwd();
var SRC = path.join(ROOT, 'src');
module.exports = function (config) {
return partial(config, {
module: {
loaders: [
{
test: /\.css/,
include: [SRC],
/*
* Use require.resolve to get a deterministic path
* and avoid webpack's magick loader resolution
*/
loaders: [require.resolve('style-loader'), require.resolve('css-loader')]
}
]
}
});
};
Then, all that’s left to do is install the loaders, with npm install --save style-loader css-loader
and override the builder
commands in package.json
to use the local webpack config (take a look at node_modules/dash-components-archetype/package.json
and builder help
for clues).
I’d appreciate any feedback concerning best practices for the above, but for the interim it works.