exclude modules dictionary

[isumix]

• Operating System: linux
• Node Version: v11.12.0
• NPM Version: 6.9.0
• webpack Version: 4.29.6
• css-loader Version: 2.1.1

Expected Behavior

Exclude modules dictionary from the bundle, if styles are imported without specifying variable for the dictionary, like so: import './style/index.scss';

And include dictionary to the bundle with import dict from './style/index.scss';

Actual Behavior

The dictionary gets included in the bundle either way.

Why it is needed:

• The dictionary size, can be large, if library is imported (bulma 30~40KB)
• It is not necessary, because we know how localIdentName is generated

The tree shaking, obviously, does not work.
Also the loader option could be specified, not to include the dictionary in the bundle output.

Another issue:
Also I was trying to see, if exportOnlyLocals: true, has any effect on bundle generation, but it
has exited with error code UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'split' of undefined

Code

module: {
  rules: [
      {test: /\.(c|sc|sa|le)ss$/, use: [
        {loader: 'css-loader', options: mode === 'production' ? {
          modules: true,
          // exportOnlyLocals: true, // throws error!
          localIdentName: 'prefix-[local]-suffix',
        } : {}},
      ]},
      {test: /\.(sc|sa)ss$/, use: {loader: 'sass-loader', options: {
          implementation: require('sass'), // TODO remove
      }}},
  ]
}

How Do We Reproduce?

webpack --mode=production --optimize-minimize

[alexander-akait]

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'split' of undefined

Please provide minimum reproducible test repo.

Looks you use webpack@3

[alexander-akait]

Exclude modules dictionary from the bundle, if styles are imported without specifying variable for the dictionary, like so: import './style/index.scss';

And include dictionary to the bundle with import dict from './style/index.scss';

It is already doesn't adding if no locals https://github.com/webpack-contrib/css-loader/blob/master/src/index.js#L325

[alexander-akait]

The tree shaking, obviously, does not work.

#506

[alexander-akait]

I can't understand problem

[isumix]

Sorry for not providing minimal repo, here you go.
File build/main.js contains css dictionary as mentioned above, which is undesirable.
Uncommenting: exportOnlyLocals: true, // throws error!
bug-repo.zip

[alexander-akait]

Invalid configuration as i written in sass-loader

[isumix]

So how do I remove the dictionary

function(e,t,n){e.exports={"my-icon-times":"Pref-my-icon-times-sufX","my-icon-chevron":"Pref-my-icon-chevron-sufX","my-icon-paperclip":"Pref-my-icon-paperclip-sufX","my-icon-caret":"Pref-my-icon-caret-sufX","my-icon-comments":"Pref-my-icon-comments-sufX","my-icon-smile":"Pref-my-icon-smile-sufX"}}]).default}

from the bundle in the file build/main.js

Is there any option to turn including off?

[alexander-akait]

modules false

[isumix]

In case someone would stumble with the same question,
I have found the solution: for css modules use postcss-modules instead of css-loader for now.
So you have much more flexibility with it.

{test: /\.(c|sc|sa|le)ss$/, use: [
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      plugins: [
        require('postcss-modules')({
          getJSON: () => {}, // do not create mapping json
          generateScopedName: 'prefix-[local]-suffix'
        })
      ]
    },
  },
]},