Laravel Mix - Dynami c Имена классов с React и Nodejs - PullRequest
Новая
       15

Laravel Mix - Dynami c Имена классов с React и Nodejs

0 голосов
/ 01 марта 2020

Почему это неправильно создает инъекцию таблицы стилей

Я на полпути, у меня есть имена классов Dynami c, сгенерированные в выходных данных в браузере, но соответствующие таблицы стилей не создаются на время генерации, только оригинальные таблицы стилей вводятся в заголовок документа. Таким образом, нет никакой связи между новым селектором и стилями.

Мне нужно nodejs для добавления стилей в заголовок документа после компиляции.

webpack.mix. js file 

const path = require('path');

const context = path.resolve(__dirname, 'resources/js');
const config = {
      module: {
         rules: [
            {
               test: /\.tsx?$/,
               loader: "ts-loader",
               exclude: /node_modules/,
               resolve: {
                  extensions: [".ts", ".tsx", ".js", ".jsx"]
               },
            },

            {
                loader: 'babel-loader',
                query: {
                  plugins: [
                    '@babel/transform-react-jsx',
                    [
                      'react-css-modules',
                       {
                         context: context,
                        'generateScopedName': '[name]__[local]___[hash:base64:5]',
                        'webpackHotModuleReloading': true
                      }
                    ]
                  ]
                },
                test: /\.js$/
            }
         ],
      }
   };


mix.react('resources/js/react/layouts/admin/layout.js', 'public/js/react/layouts/admin/layout.js').webpackConfig(config);

Entity React Component file 

import classNames from 'classnames/bind';
import styles from 'semantic-ui-css/semantic.css'; // CSS modules
const cx = classNames.bind(styles);

в функции render () 

<Button icon compact basic styleName={ cx("yellow") }>
   <Icon name='bars' size="large" />
</Button>

это выдает что-то похожее на html

<button class="ui basic compact icon button semantic__yellow___2k23H"><i aria-hidden="true" class="bars large icon"></i></button>
...