Как настроить накопительный пакет для модулей css в TypeScript

Мне удалось импортировать модули css в мой класс Typescript React, используя этот плагин от npm.

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. Ниже приведен снимок экрана с папками, созданными сборкой:

построить дерево папок

Весь css был перемещен в папку lib, а в сгенерированный файл Text.js:

Не удается устранить ошибку файла

Это способ либо сохранить структуру файлов, либо перенести таким образом, чтобы импорт указывал на правильный файл css?

Я видел некоторые обходные пути с webpack.config.js (запускает eject скрипт), однако мне не совсем легко с ним (так как он добавляет много файлов и зависимостей в проект, и я не уверен, как все правильно обрабатывать ).

Большое спасибо!


person KawaLo    schedule 13.05.2020    source источник


Ответы (1)