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

Question

我使用来自 npm 的 this plugin 在我的 Typescript React Class 中导入了 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/ 文件夹中添加了以下模块文件：

modules.d.ts

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

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

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

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

import css from './Text.module.css';

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

package.json

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

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
    {
        inlineDynamicImports: true,
        input: './src/index.ts',
        output: [
            {
                file: pkg.main,
                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
        ]
    }
];

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

所有css已经移动到lib文件夹，在生成的Text.js文件中：

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

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

非常感谢！

Answer 1

没关系，我明白了！我从 this post (with a little fix from this another one) 中找到了汇总配置文件的 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
        ]
    }
];

现在一切正常！

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

How to setup rollup for css modules in TypeScript

reactjs

typescript

rollup

react-css-modules