jsx/tsx使用cssModule和typescript-plugin-css-modules
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>1，前言</li><li>2，效果图</li><li>3，如何使用<ul><li>3.1，安装</li><li>3.2，配置</li></ul></li><li>4，示例</li><li>5，插件错误处理</li><li>5.1，错误触发原因</li><li>5.2，解决办法</li></ul></div><p></p><h1 id="1前言">1，前言</h1>
<p>在<code>vite/webpack</code>搭建的项目中，不管是<code>vue</code>还是<code>react</code>，都可以写<code>jsx/tsx</code>，为了避免样式污染，常用的方式有两种。一种是每个组件都用一个唯一类名<code>class</code>包裹，使用<code>less/scss</code>嵌套样式。另一种是使用<code>cssModule</code>模块化。本文就分享一下如何使用<code>cssModule</code>，并推荐一个好用的插件：typescript-plugin-css-modules，让你在<code>vscode</code>中，能拥有<code>typeScript</code>一样的智能提示。</p>
<h1 id="2效果图">2，效果图</h1>
<p><img src="https://img-blog.csdnimg.cn/b69dd09a2f2542a99474413e0c38aa29.gif#pic_center"></p>
<p><img src="https://img-blog.csdnimg.cn/54cf6fa22ca24ae1b3dd9c4b92c70db5.png#pic_center"><br>
<img src="https://img-blog.csdnimg.cn/34601b0be346439890f771e1f94f20fe.png#pic_center"></p>
<h1 id="3如何使用">3，如何使用</h1>
<p>注：本文各种配置均使用<code>vscode</code>编辑器。</p>
<h2 id="31安装">3.1，安装</h2>
<ul>
<li>yarn</li>
</ul>
<pre><code>yarn add -D typescript-plugin-css-modules
</code></pre>
<ul>
<li>npm</li>
</ul>
<pre><code>npm install -D typescript-plugin-css-modules
</code></pre>
<h2 id="32配置">3.2，配置</h2>
<p>配置后需要重启<code>vscode</code>，然后项目中使用<code>cssMoudule</code>时，就可以享受到<code>typeScript</code>提示的<code>class</code>类名了，配置如下：</p>
<ul>
<li>配置<code>tsconfig.json</code></li>
</ul>
<pre><code class="language-json">{
"compilerOptions": {
"plugins": [{"name": "typescript-plugin-css-modules"}]
}
}
</code></pre>
<ul>
<li>配置<code>settings.json</code></li>
</ul>
<p>在项目根目录新建<code>.vscode</code>文件夹，在文件夹中新建<code>settings.json</code>，并写入如下配置，用于指明使用<code>typescript.tsdk</code>的位置以及开启提示，如果<code>vscode</code>有提示，记得同意。</p>
<pre><code class="language-json">{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
</code></pre>
<blockquote>
<p>注意：<code>cssModule</code>可以用于<code>css，less，scss</code>等，使用时，<code>css/less/scss</code>文件后缀必须由<code>.css/.less/.scss</code>变为 <code>.module.css/.module.less/.module.scss</code></p>
</blockquote>
<h1 id="4示例">4，示例</h1>
<ul>
<li>index.tsx</li>
</ul>
<pre><code class="language-tsx">import { defineComponent } from 'vue'
import styles from './index.module.scss'
export default defineComponent({
name: 'notFound',
setup() {
return () => (
<div class={styles.main_box}>11111</div >
)
}
})
</code></pre>
<ul>
<li>index.module.scss</li>
</ul>
<pre><code class="language-scss">.main_box {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
text-align: center;
background-color: #ffffff;
}
</code></pre>
<h1 id="5插件错误处理">5，插件错误处理</h1>
<p>截止本文发布之时，<code>typescript-plugin-css-modules</code>的版本为<code>3.4.0</code>，此插件有一个bug，会导致<code>cssModule</code>类型提取失败，模块类型是一个<code>{}</code>的情况，如下所示：</p>
<blockquote>
<p>Property '<specific class="" name="">' does not exist on type {}</specific></p>
</blockquote>
<p><img src="https://img-blog.csdnimg.cn/dc5efe10a8cf48a9aedc29247c275c29.png#pic_center"></p>
<p>issues地址</p>
<h1 id="51错误触发原因">5.1，错误触发原因</h1>
<p>这个bug目前有两个方式都会触发：</p>
<ul>
<li>
<p>1，当你项目中使用<code>less/scss</code>的<code>@include/@mixin</code>等等指令的时候</p>
</li>
<li>
<p>2，当你的项目使用<code>/ deep /</code>这样的深度选择器语法的时候</p>
</li>
</ul>
<h1 id="52解决办法">5.2，解决办法</h1>
<ul>
<li>1，在需要使用<code>@include/@mixin</code>等等指令的时候，在<code>cssModule</code>文件的头上引入样式，就可以解决(之前是全局引入)，如下所示：</li>
</ul>
<pre><code class="language-scss">@use "../../../static/styles/common.scss" as *;
</code></pre>
<ul>
<li>2，换一种深度选择器写法，如下所示：</li>
</ul>
<pre><code class="language-scss">.main{
& ::deep .el-button{
background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
&:hover{
opacity: 0.8;
}
}
}
</code></pre>
<hr>
<p><strong>如果看了觉得有帮助的，我是@上进的鹏多多，欢迎 点赞 关注 评论；END</strong></p>
<hr>
<blockquote>
<p>PS：在本页按F12，在console中输入document.querySelectorAll('.diggit').click()，有惊喜哦</p>
</blockquote>
<hr>
<p><img src="//pub.idqqimg.com/wpa/images/group.png"></p>
<p><code>公众号</code></p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/443c375568fb4d68beb988b2959bafb3~tplv-k3u1fbpfcp-watermark.image"></p>
<p><mark>往期文章</mark></p>
<ul>
<li>Vue2全家桶+Element搭建的PC端在线音乐网站</li>
<li>超详细的Cookie增删改查</li>
<li>助你上手Vue3全家桶之Vue-Router4教程</li>
<li>助你上手Vue3全家桶之Vue3教程</li>
<li>助你上手Vue3全家桶之VueX4教程</li>
<li>使用nvm管理node.js版本以及更换npm淘宝镜像源</li>
<li>超详细！Vue-Router手把手教程</li>
<li>超详细！Vue的九种通信方式</li>
<li>超详细！Vuex手把手教程</li>
</ul>
<p><mark>个人主页</mark></p>
<ul>
<li>CSDN</li>
<li>GitHub</li>
<li>简书</li>
<li>博客园</li>
<li>掘金</li>
</ul>
</div>
<div id="MySignature" role="contentinfo">
接受失败，但不选择放弃！<br><br>
来源：https://www.cnblogs.com/-pdd/p/16502768.html
頁:
[1]