Seems to be working, but the hash is different in my extracted bundle.css and my html template class names

[kk]

I am generating a styles.bundle.css using ExtractTextPlugin.

Here's an example class from styles.bundle.css: .styles__navbar___3V2fO{ //some styles }

Now in the HTML template that was rendered, here is the class name: <nav class="styles__navbar___2n0nV navbar navbar-default" data-reactid="2">

As you can see, the hashes are different between the styles.bundle.css and the class name in my template.

Here is a snippet from my application's server.js:

if (isProd) {
 
  require('css-modules-require-hook')({
    generateScopedName: '[name]__[local]___[hash:base64:5]',
    extensions: ['.scss', '.css'],
    preprocessCss: (data, file) => sass.renderSync({
      data,
      file
    }).css
  });

  const simpleCache = {};

  const configureStore = require('../../src/config/configure-store');
  const store = configureStore.default();
  const routes = require('../../src/config/app-routes').default;

  app.use(express.static(path.join(__dirname, '../', '../', 'dist/')));

  app.get('*', (req, res) => {

Can someone please help me understand what I am doing wrong? Also, please let me know if there is additional information I should provide to better help answer my question.

Thank you!

[Aleksey Litvinov]

Hi,

Presumably issue comes from using different root directories for generating hash, since its generated from the file paths. Please check that you use the same working directory when running webpack and the server.js. In case you need to specify it manually, you may use the rootDir option. For example:

const {resolve} = require('path');

require('css-modules-require-hook')({
  generateScopedName: '[name]__[local]___[hash:base64:5]',
  extensions: ['.scss', '.css'],
  preprocessCss: (data, file) => sass.renderSync({
    data,
    file
  }).css,
  rootDir: resolve(__dirname, '../'),
});

[kk]

@sullenor thanks for the response!

Here's a snippet of my production segment of webpack.config.js:

const appPath = path.join(__dirname, '../', 'src');

if (__PROD) {
  config = {
    devtool: 'cheap-module-source-map',
    context: appPath,
    entry: [
      'main.js'
    ],
    resolve: {
      root: appPath,
      extensions: ['', '.js', '.jsx']
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loaders: [
            'babel'
          ],
          include: appPath
        },
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
        }
      ]
    },

So I'm pointing to the src folder.

Are you saying that I should do something similar in my server.js file?

[kk]

update: @sullenor Thanks man.

I updated with the rootDir key and it works now.

Thanks so much! You're a hero!

So I know that rootDir is part of the documentation, but perhaps it might be nice to give an example snippet like this.