如何运行导入了CSS Modules的ts-node脚本？

方案1：通过ts-node直接运行（仅需过编译、不需要读取实际类名场景） #

该方案和jest的Mock思路一致，不需要修改现有业务代码，仅需新增配置即可。

• 第一步：补充CSS Modules类型声明
  在项目根目录新增css-modules.d.ts类型文件，解决TS找不到模块的报错：

declare module '*.module.scss' {
  const classes: Record<string, string>
  export default classes
}

记得将该文件路径加入tsconfig.json的include数组中。

• 第二步：运行时Mock CSS文件加载
  可以直接用成熟的工具包实现：

1. 安装依赖：npm i ignore-styles @types/ignore-styles -D
2. 运行脚本时添加注册参数：

ts-node -r ignore-styles 你的脚本路径.ts

如果需要自定义忽略的文件后缀，也可以自己写极简的注册脚本，新建mock-css.js写入：

require.extensions['.scss'] = () => module.exports = {}
require.extensions['.css'] = () => module.exports = {}

运行时替换为：

ts-node -r ./mock-css.js 你的脚本路径.ts

方案2：通过webpack编译后运行（需要读取真实CSS Modules类名场景） #

如果脚本运行逻辑依赖真实的类名字符串，可直接复用现有webpack配置编译脚本后运行：

• 新增脚本专属webpack配置，核心配置参考如下：

module.exports = {
  entry: './你的脚本路径.ts',
  target: 'node', // 指定编译产物适配Node环境
  module: {
    rules: [
      // 直接复用现有项目的ts、CSS Modules相关loader配置即可
      { test: /\.tsx?$/, use: 'ts-loader' },
      {
        test: /\.module.scss$/,
        use: [
          // 不需要style-loader，仅保留css-loader导出类名对象即可
          'css-loader?modules=true',
          'sass-loader'
        ]
      }
    ]
  },
  resolve: { extensions: ['.ts', '.tsx', '.js', '.scss'] },
  output: { filename: 'bundled-script.js', path: __dirname + '/dist' }
}

• 执行webpack编译完成后，直接运行打包产物即可：

node ./dist/bundled-script.js

内容的提问来源于stack exchange，提问作者Michael Gummelt