Успях да импортирам css модули в моя Typescript React Class с помощта на този плъгин от 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
скрипт), но не ми е много лесно с него (тъй като добавя много файлове и зависимости към проекта и не съм сигурен как да се справя добре с всичко ).
Благодаря много!