mern-starter icon indicating copy to clipboard operation
mern-starter copied to clipboard

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

Open sdimmick opened this issue 7 years ago • 1 comments

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:

{
  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:

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'),
},

sdimmick avatar Apr 01 '17 22:04 sdimmick

@rosariorussell you wan to take a look at this one?

mannyhenri avatar Jun 02 '18 05:06 mannyhenri