记录vue+tsx写法中使用css module的一点小坑

问题背景

1.背景：如果以tsx的形式写render：Vnode以渲染出html，tsx文件中应该是不能用vue文件中的template写html结构，以及style写样式的。就要使用css module。
2.问题：使用css module设置requireModuleExtension: false，省略xxx.module.css中的module后缀，第三方组件库的样式加载不出来。

1.css module

因此，我们要借助一个css module的技术，这个在react中用得比较多，其原理是在以html中的元素标签类名生成hash随机字符串如下：

<span class="iner">runtime之前</span>
<span class="index-module_inner_i2RVk">runtime</span>

2.解决方法

设置requireModuleExtension: true ,因为如果省略xxx.module.css中的module后缀让webpack去处理，就会有冲突，第三方组件库的样式便加载不出来。

// vue.config.js
const tsImportPluginFactory = require("ts-import-plugin");

module.exports = {
  parallel: false, // ts-loader在多线程的时候打包会丢失三方组件样式
  css: {
    requireModuleExtension: true // 开启CSSmodule并保留xxx.module.css后缀
  },
  configureWebpack: {
    resolve: {
      extensions: [".js", ".vue", ".json", ".ts", ".tsx"] // 加入ts 和 tsx
    },
    module: {
      rules: [
        { // ts,tsx模块资源导入处理
          test: /(\.tsx|\.ts)$/,
          exclude: /node_modules/,
          loader: 'ts-loader',
          options:
          {
            transpileOnly: true,
            getCustomTransformers: () => ({
              before: [
                tsImportPluginFactory({
                  libraryName: "ant-design-vue",
                  libraryDirectory: "es",
                  style: "css"
                })
              ]
            }),
            compilerOptions: {
              module: "es2015"
            }
          }
        }
      ]
    }
  }
};