Hashnode / Hashnode/mern-starter

main.css should not be loaded as CSS module via webpack

Open
#300 1 comment 4 reactions 0 assignees View on GitHub
V2.6.0
Dominant language
JavaScript
Stars
5.1k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

`client/main.css` is a standard, non-module stylesheet, but according to the CSS loaders defined in `webpack.config.prod.js`, it appears to be treated as a CSS module:

```js
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?localIdentName=[hash:base64]&modules&importLoaders=1!postcss-loader'),
}, {
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
}
```

This results in the stylesheet being loaded separately after the main HTML content of the page instead of with the main CSS manifest at the top of the page, as it should.

One potential solution would be to move non-module stylesheets into a separate directory, and define separate webpack loaders: one for CSS modules, and one for standard CSS files.

Something like:

```js
var rawCSSDir = path.join(__dirname, 'client/style');

{
test: /\.css$/,
exclude: [/node_modules/, rawCSSDir],
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?localIdentName=[hash:base64]&modules&importLoaders=1!postcss-loader'),
}, {
test: /\.css$/,
include: rawCSSDir,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?localIdentName=[hash:base64]&importLoaders=1!postcss-loader'),
},
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.