#css #reactjs #webpack #css-modules #css-loader
Вопрос:
У меня есть следующий компонент в react:
component.js
import styles from './styles.css';
const SomeComponent = (props) => {
return <div className={`${styles["container"]}`}>Hey :D</div>
}
export default SomeComponent;
styles.css
@value container: #f5f5f5;
.container {
background-color: red;
}
.unique-class {
background-color: blue;
}
Как вы можете видеть, у меня есть значение и класс с одинаковым именем. Все работает нормально , если я это делаю styles["unique-class"]
, я имею в виду, что я получаю преобразованное имя класса. Проблема возникает, когда я это делаю styles["container"]
. В этом случае я получаю строку #f5f5f5
, что имеет смысл , потому что это значение значения container
. Но то, что мне нужно, — это преобразованное имя класса .container
!
Это часть конфигурации webpack, выполняющая преобразование:
{
test: /.css$/,
exclude: [
path.resolve(__dirname, 'node_modules/@material'),
path.resolve(__dirname, 'node_modules/@rmwc'),
path.resolve(__dirname, 'node_modules/react-dual-listbox/lib/react-dual-listbox.css'),
path.resolve(__dirname, 'node_modules/react-image-lightbox/style.css'),
path.resolve(__dirname, 'web/js/src/modules/Common/styles/material.css'),
],
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: { localIdentName: '[path]___[name]__[local]___[hash:base64:5]' },
},
}],
},
Я полагаю, что, возможно, есть способ получить доступ к значениям в styles
переменной. Я не знаю, возможно ли это вообще, может быть, избежать @values
попадания в styles
переменную. А ты как думаешь?