Css-loader: Who can help me,“localIdentName” does not work in my code,I do not know why

[wanliyunyan]

in my .tsx file,
import "./BasicLayout.less";

<div className="logo">
   <Link to={"/"}>
       <h1>Ant Design Pro</h1>
    </Link>
</div>

in my webpack,
`

    test: /\.less$/,
    use: ExtractTextPlugin.extract({
      use: [{
        loader: 'css-loader',
      }, {
        loader: 'less-loader',
      }],
      fallback: 'style-loader',
    }),
  }

`
in my .less file

.logo {
  height: 64px;
}

now ,these code can work normally,but if i want to use "localIdentName"
```

    test: /\.less$/,
    use: ExtractTextPlugin.extract({
      use: [{
        loader: 'css-loader',
        options: {
          modules: true,
          localIdentName: '[path][name]__[local]--[hash:base64:5]',
        },
      }, {
        loader: 'less-loader',
      }],
      fallback: 'style-loader',
    }),

The style
 ```
.logo {
  height: 64px;
}

does not appear on the page，when i delete

options: {
              modules: true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            },

The style appears on the page again.......
Not only .less file has this problem, but also .css file
I really have no ideal, who can help me？？？？？？

[d3viant0ne]

Please submit support requests and questions to StackOverflow using the tag [webpack]. StackOverflow is better suited for this kind of support though you may also inquire in Webpack Gitter. The issue tracker is for bug reports and feature discussions. See also our CONTRIBUTING guidelines.

[michael-ciniawsky]

- import "./BasicLayout.less";
+ import styles from "./BasicLayout.less"

const component = (props) => (
+   <div className={styles.container}></div>
)

[wanliyunyan]

@d3viant0ne thanks！I am a noob, did not really understand the issue......

[wanliyunyan]

@michael-ciniawsky thanks！

[badaljain]

I have a question, if we use localIndentname, this breaks the css/classes defined and used by some library for example antd. How can we use both:

import './style.css'
import style from './style.css'

Thanks

[wanliyunyan]

@badaljain if you use antd,ni could code like this

{ "plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] ] }

but,i do not kown how to use both

[badaljain]

Hi @wanliyunyan,

Even without this, I am able to use antd properly but I want to support both the import formats.

Thanks for your time :)

[elisechant]

@badaljain for the case

import './style.css'

2 options.

1. Inside a file, there's a helper you can use like this:

style.css

:global(#app) {
  border: blue;
}

https://github.com/css-modules/css-modules#exceptions

1. At the file level you can use webpack module exclude and include syntax to wrap up separate build processes and use the appropriate loaders. See this - https://stackoverflow.com/questions/47879866/how-to-let-css-modules-import-files-globally-by-default.

Note: you need to "import" css from JavaScript, not using Sass or CSS import syntax for webpack to do its' thing.

[badaljain]

Hi @elisechant,

This approach will work with just import './style.css' format right?
Actually, I want to use something like this:

1. (possible when I use localIndentName)
   import style from './style.css'

className= {style.someClass}

1. and also support(possible when I remove localIndentName):
   import './style.css'

className={someClass}

Thanks,
Badal

[jbbpatel94]

i am also facing same issue