React cssmodule doesn’t work very well when you first start using React. You need it every time

import style from './index.module.scss'
import cls from 'classnames'. <div className={style.xxx}></div> ... <div className={`${style.xxx} ${style['xxx']}`}></div>
...
<div className={cls(style.xxx, style['xxx'])}></div>
Copy the code

It feels like a hassle to introduce it like that.

How easy it is to add the scoped attribute directly to the style tag in a. Vue file.

I ran into some problems

Question 1

Although style is introduced, there are no smart hints.

The solution

Uses the CSS Module Typed plug-in

Install dependencies
# require NPM install -g typed-css-modules # use less NPM install -g less # use SCSS NPM install -g node-sassCopy the code
Method of use

Add comments at the top of style files that require smart hints

// @type
Copy the code

or

/* @type */
Copy the code

This writing method encountered a habit problem, may be the static page to write too much, personal habit to write HTML first and then write style.

Question 2

Adding a style every time we write a className feels cumbersome, and we usually use emmet syntax to write pages and rework the DOM.

Anyway, I’ve seen a lot of people write one by one and replace it manually

For this, I am wondering if I can match the string in className=” XXX “and replace it with the regular expression className={style.xxx}.

So I wrote this regular

const exp = /className="\w+"/g
Copy the code

Put it in vscode’s lookup box

Surprisingly, only one item was matched, let alone so much, extract \w+ content is the key

So I put a little parenthesis

const exp = /className=("\w+")/g
Copy the code

[$1]} className={style[$1]}

If you click replace, it will work, but there are still some classnames that are not matched.

We usually use the name xxX-XXX

So my re is going to be

const exp = /className=("\w+\-\w+")/g
Copy the code
What about ‘XXX-XXX-XXX’?

Every time I change the regular to continue to replace, I am really a little clever

Now the question is, what about multiple class names?

Can’t figure out how to do, simply change the re to

const exp = /className=(".+")/g
Copy the code

Multiple class names are manually modified.

It’s not a one-click solution, but at least it’s not a one-click solution, is it?

Vscode plug-in

People who want to be lazy don’t stop there.

Did not find the corresponding plug-in replacement, reference px2REM plug-in source code to write a classnames plug-in, although the function is very simple, but there are a lot of bugs, but still barely usable.

The vscode plug-in searches for classnames

Yeah, that’s it

Ah? What? The last plugin called Classnameify is what I want?

The effect of

Method of use

CMD/CTRL + Shift + P Use the Convert ClassName command

Right click in JSX/TSX file

Shortcuts? I won’t tell you CMD/CTRL + Shift + A, the idiot doesn’t know this is wechat screenshot shortcut key, manual change

configuration

Classnames changed

Oh, by the way, if you introduce classnames as other names

import cls from 'classnames'
Copy the code

You can modify the Classnames field

In the same way

import classes from './index.module.scss'
Copy the code

You can modify the Module Name field

If you’re not afraid of file overwriting/loss, check Copy

Can be

import './index.css'
Copy the code

Modified to

import style from './index.module.css'
Copy the code

And copy the./index.css file as./index.module.css

Why classnames were not introduced

I forgot to

I hope you can make fun of it

By the way, how do you usually write, share the skills of paddling/fishing/lazy