Когда я импортирую css в файл js (например, import style from './node_modules/package/css/input.css'
), все в порядке. Но когда я пытаюсь импортировать его в css, он не внедряет классы в компонент
input.styl
@import '~package/css/input.css'
.color
color: red
input.tsx
import style from './input.styl'
function Input() {
return (
<div className={ style.container }>
<input className={ style.color } />
</div>
)
}
Выводится файл css: .container-wGX2p {...} .color-3NOmr {...}
Но в отображаемом html-элементе нет импортированного класса div
: <div><input class="color-3NOmr"></div>
Конфигурация Webpack:
{ test: /\.tsx?$/i,
use: [
'babel-loader',
{ loader: 'ts-loader',
options: {
transpileOnly: true,
}
}
],
},
{ test: /\.styl$/i,
use: [
{ loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/assets/',
}
},
{ loader: 'css-loader',
options: {
localsConvention: 'camelCase',
modules: {
localIdentName: '[local]-[hash:base64:5]',
}
}
},
'postcss-loader',
'stylus-loader'
]
},