如何在 TypeScript 中设置 css 模块的汇总

Question

我设法使用npm 中的这个插件在我的 Typescript React 类中导入 css 模块。

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "outDir": "build",
    "jsx": "react",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": false,
    "module": "ESNext",
    "allowJs": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": "src",
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  "exclude": [
    "node_modules/"
  ],
  "include": [
    "src/*"
  ]
}

我还在 src/ 文件夹中添加了以下模块文件：

模块.d.ts

{
  "compilerOptions": {
    "target": "ESNext",
    "outDir": "build",
    "jsx": "react",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": false,
    "module": "ESNext",
    "allowJs": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": "src",
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  "exclude": [
    "node_modules/"
  ],
  "include": [
    "src/*"
  ]
}

它抑制了所有警告，我能够很好地测试我的代码。我有一个组件导入位于同一文件夹中的 css 模块：

- src
  - components
    - Text.tsx
    - Text.module.css

所以我的组件包含以下导入行：

declare module '*.module.css' {
    const classes: { [key: string]: string };
    export default classes;
}

我现在想将我的代码转换为 commonjs，以将其用作其他代码中的 React 模块。这是我的汇总配置：

包.json

"scripts": {
  "build": "rollup -c && tsc",
  "test": "jest"
}

rollup.config.js

- src
  - components
    - Text.tsx
    - Text.module.css

我能够运行yarn build而没有任何错误，但是当我查看构建的代码时，css 模块文件不再位于 Text.js 文件旁边。下面是构建生成的文件夹的截图：

所有 css 已移至 lib 文件夹，并在生成的 Text.js 文件中：

他们是保留文件结构还是以导入指向正确的 css 文件的方式进行转译的方法？

我看到了 webpack.config.js （运行eject脚本）的一些解决方法，但是我不太容易使用它（因为它向项目添加了很多文件和依赖项，而且我不确定如何处理好一切） 。

多谢！

Answer 1

没关系，我明白了！我从这篇文章中发现了有关汇总配置文件的preserveModules标志（在另一篇文章中进行了一些修复）。刚刚将我的 rollup.config.js 编辑为：

rollup.config.js

import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';

export default [
    // CommonJS
    {
        preserveModules: true,
        input: './src/index.ts',
        output: [
            {
                dir: './build',
                format: 'cjs'
            }
        ],
        external: [
            ...Object.keys(pkg.dependencies || {})
        ],
        plugins: [
            babel({
                exclude: 'node_modules/**'
            }),
            typescript({
                typescript: require('typescript')
            }),
            postcss({
                plugins: [autoprefixer()],
                sourceMap: true,
                extract: true,
                minimize: true
            }),
            terser() // minifies generated bundles
        ]
    }
];

现在它工作得很好！