Для изменения структуры генерируемого className в create-react-app можно внести следующие изменения в конфигурацию webpack:
1. Создайте файл webpack.config.js в корне вашего проекта, если его еще нет.
2. Внутри файла webpack.config.js добавьте следующий код:
```javascript
const path = require('path');
module.exports = {
// Другие настройки webpack
// ...
// Правила для обработки CSS-модулей
module: {
rules: [
{
test: /\.module\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]',
},
importLoaders: 1,
// Другие настройки css-loader
// ...
},
},
],
include: path.resolve(__dirname, 'src'),
},
// Другие правила для обработки CSS
// ...
],
},
};
```
3. Установите необходимые пакеты, если они еще не установлены:
```bash
npm install style-loader css-loader --save-dev
```
После выполнения этих шагов, генерируемый className будет иметь вид [classname]__[local]--[hash:base64:5], где [classname] будет названием класса, [local] будет именем класса внутри модуля, а [hash:base64:5] будет хэшем, уникальным для каждого класса.
Нет необходимости изменять нейминг файлов в create-react-app для достижения этого эффекта. Настройка webpack, как указано выше, позволяет изменить структуру генерируемого className без изменения названия файлов модулей.