Questions about css module

problem description

after taking a look at css modules, there are still many places I don"t understand. I hope you can give me your advice

.

principle

css-module achieves local scope by escaping class to a unique class name in the form of hash.

my question

question 1

does the generated hash form class name change each time you build?
for example:

<div className="{style.block}"></div>

hello boys

is compiled into:

<div class="block_xyT5N"><div>

hello boys

I modified the p tag to add a style to it

<div className="{style.block}"></div>
<p className="{style.parag}">hello boys

excuse me, will the block_xyT5N class name generated by the original div change after I change the style of the p tag and rebuild it? Why?

question two

won"t hash collisions occur in hash formal class names? Won"t there be a duplicate name? For example, there are hundreds of class in the current file, while hash generates a general configuration:

{
    test: /\.css$/,
    use: [
        {
            loader: "style-loader"
        },
        {
            loader: "css-loader?modules&localIdentName=[name]-[hash:base64:5]"
        }
    ]
},
The

configuration only takes the first five characters of the first hash. Does this guarantee no repetition? Isn"t this a combination of 100, 000 or 1 at most?

Mar.03,2022

answer 1:
will not change
answer 2:
I have never seen a page with hundreds of class, if any. Hehe

  • How to use Webpack so that css can only be used by a single component

    for example, I have two components An and B. How do I get component A to use only A.less , and component B to use only B.less . Because they all have the same class name. it is known that CSS Module is available. I d like to know if there are ...

  • Questions about css module

    problem description after taking a look at css modules, there are still many places I don t understand. I hope you can give me your advice . principle css-module achieves local scope by escaping class to a unique class name in the form of hash. ...

    Mar.03,2022
  • Questions about css module

    problem description after taking a look at css modules, there are still many places I don t understand. I hope you can give me your advice . principle css-module achieves local scope by escaping class to a unique class name in the form of hash. ...

    Mar.03,2022
Menu