react jquery-uiとcss-loaderの併用について

Question

https://teratail.com/questions/120211
の続きになります。

import React from 'react';
import { render } from 'react-dom';

import $ from "jquery";
import 'jquery-ui/themes/base/resizable.css';

window.jQuery = $;
require('jquery-ui/ui/version');
require('jquery-ui/ui/plugin');
require('jquery-ui/ui/widget');
require('jquery-ui/ui/widgets/mouse');
require('jquery-ui/ui/widgets/resizable');

class Test extends React.Component {

    componentDidMount() {
        this.$left = $(this.refs.left);
        console.log(this.$left.resizable);
        this.$left.resizable()

    }
    render() {
        return (
            <div>
                <div className="left" ref="left">aaa</div>
            </div>
        )
    }

}

render(<Test />, document.getElementById('root'));

jquery-uiを読み込むことはおかげさまで出来たのですが、
css-loaderを使用しており（すいません、正直この機能自体深く理解しておらず製作の決まりで使用しなければならず・・）
className={theme.hoge}などとしてTest.hoge-jaie3NR3のように自動で
css名がかぶらないようになっております。
これがjquery-uiのcssにも反映されており、
htmlにはclass="ui-resizable-handle"と付与されるのですが、
cssの方ではui-resizable-handle-NEJJ3ij4---erf(例)のように
なっており、cssがあたっていない状態になってしまいます。

こちらを改善するにはどのような手法が考えられますでしょうか？

//webpack設定ファイルを追記

const path = require('path');
const webpack = require('webpack');

const settings = {
  entry: {
    test: [
      "react-hot-loader/patch",
      "./src/frontend/test.js"
    ]
  },
  output: {
    filename: "[name].js",
    publicPath: "/",
    path: path.resolve("build")
  },
  resolve: {
    extensions: [".js", ".json", ".css"]
  },
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /.js?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            ["es2015", { modules: false }],
            "stage-2",
            "react"
          ],
          plugins: [
            "transform-node-env-inline"
          ],
          env: {
            development: {
              plugins: ["react-hot-loader/babel"]
            }
          }
        }
      },
      {
        test: /.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          "postcss-loader" // has separate config, see postcss.config.js nearby
        ]
      },
    ]
  },
  devServer: {
    contentBase: path.resolve("src/www"),
    publicPath: "http://localhost:3000/", // full URL is necessary for Hot Module Replacement if additional path will be added.
    quiet: false,
    hot: true,
    historyApiFallback: true,
    inline: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
  ],
};

module.exports = settings;

追記：
やはり、css-loaderでマッピングされたクラス名だと
jsが反応しないようなので、jquery-uiのcssファイルだけcss-loaderが
きかないように出来ないかという方向性で検討してみたいと思いますのでいったんこちらは閉じさせていただきます。

Comments

[HayatoKamono]

webpackの設定ファイルのコードを追記して下さい

[cheche0830]

追記いたしました！

[HayatoKamono]

どーぞ！

Answer 1

どういう使い方がされるのかを把握していないので２パターン書きます。

対策1

css-loaderの設定箇所にあるmodules: trueをコメントアウトするなり、falseにすれば、クラス名が自動で書き換わることはなくなるかと思います。

その分、クラス名の衝突が起きる可能性は生じるので、こちらの対策を使う場合は他の自前のクラス名がBEM記法などを使って、名前の衝突が起きないようになっている必要があるかと思います。

対策2

コードを見て内容を確認して下さい。(説明は省略します。)

//適当な名前の変数に代入
import resizableStyle from 'jquery-ui/themes/base/resizable.css';

//中略

class Test extends Component {

  render() {
     
    //中身をログ出力して確認して下さい
    console.log(resizableStyle);

    return (
      <div>
        <div className={resizableStyle["ui-resizable"]} ref="left">aaa</div>
      </div>
    )
  }

}

console.log(resizableStyle)の結果

こういうマッピングになってるので、上の例であればresizableStyle["ui-resizable"]という名前で自動生成されるクラス名を参照出来るはずです。

{ui-resizable: "resizable--ui-resizable--22-njahR", ui-resizable-handle: "resizable--ui-resizable-handle--ZkuWOxnm", ui-resizable-disabled: "resizable--ui-resizable-disabled--2oXyoPd9", ui-resizable-autohide: "resizable--ui-resizable-autohide--2gA9FohF", ui-resizable-n: "resizable--ui-resizable-n--RzxxGAya", …}

Comments

[cheche0830]

詳細にありがとうございました！！！試してみます！！！

[HayatoKamono]

ui-resizableのように変数名にハイフンがあると構文エラーになってしまうので、resizableStyle["ui-resizable"]のようにする必要があると思います。ということで回答に修正を反映しました。

[cheche0830]

ありがとうございます！ちなみにcss-loaderはプロジェクト的にいまから切れないので対策2の方を試してます！！

[cheche0830]

試してみました！ちゃんとconsole.log(resizableStyle);で出力は確認できました。ただ、このresizableのドラッグするハンドルの部分がjsにて挿入されるとおもうのですが、（<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>）これにはマッピングされたcssが挿入されてないですね・・・これを<div class="ui-resizable-handle-22-njahR ui-resizable-e-23-bjahR" style="z-index: 90;"></div>的なことに出来れば解決なのですが・・・

[HayatoKamono]

質問文にコードベースで説明して頂けますか？どういうファイル構成でそれぞれがどうなってるのかなど把握していないので。必要最低限の動作を確認出来るコードを一式追記して下さい。（どこかを直せば、その一式が動くようなもの）

[HayatoKamono]

最小限のサンプルコード一式を用意して頂き、それを質問文に追記頂ければ確認致します。不足したものがあってこちらで手直しできる状態にない場合は以降、こちらの質問への回答は行わないので１チャンスということでお願いします。（結構、こういう対応依頼をすると、質問者側が準備不足で小出し小出しでやり取りが無駄に起きるケースがよくあるので、そういうのは避けたいのです）

[HayatoKamono]

必要であれば、一旦質問を閉じて、別質問で改めて、質問内容を最新の現状をふまえた内容にして投稿頂ければと思います。そちらの方が余計な情報が省かれたりして、クリーンになりそうな気はします。加えて、他の方が回答しやすいというのもあるかと思います。こういう流れだと他の方が回答しづらい空気になってしまい、質問の回答が私一人に依存するかたちになってしまったりもしますので。

[cheche0830]

了解しました！
明日細かく記載したいと思います！

[HayatoKamono]

オッケーです！

[cheche0830]

対策1の方で検討したいと思いますのでいったん質問終了いたします！

[HayatoKamono]

Okです！