質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

1615閲覧

react css-loader使用中、jquery-uiのcssだけ除外する

cheche0830

総合スコア187

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/04/05 01:37

編集2022/01/12 10:55

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

reactにてjquery-uiのresizableを使用したいのですが、
css-loaderを案件の兼ね合いで使用せねばならず、jquery-uiで自動で
生成されるcssにもcss-loaderのマッピングが当然きいてしまい、
cssがあたらない(正確にはそのcssをトリガーにjsが動いていると思われるのでjsもうごかない)状態です。
jquery-uiのcssだけcss-loaderをきかないようにすることは可能でしょうか?

コンポーネントファイル例

import React from 'react'; import { render } from 'react-dom'; import $ from "jquery"; import theme 'test.css'; 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); this.$left.resizable() } render() { return ( <div> <div className={theme.left} ref="left">aaa</div> </div> ) } } render(<Test />, document.getElementById('root'));

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;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

掲載されているコードだけでは直ぐに動作確認など出来る状態ではないので、ヒント的なことしか言えませんが、test: /.css$/,の部分は正規表現によるパターンマッチングなので、ここを2パターン用意して処理を変えるといけそうな気がします。

{ test: //, //正規表現 use: [ //省略 }, "postcss-loader" // has separate config, see postcss.config.js nearby ] } }

つまり、上のcss-loaderを使っているブロックを2つ用意し、片方ではjquery-uiのcssを対象にした設定、もう片方ではそれ以外のcssを対象にした設定を書くということです。

動作確認していないので的外れな回答である可能性が有りますが、良かったら試してみてください。

投稿2018/04/05 02:56

HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cheche0830

2018/04/05 03:23

ありがとうございます!webpackの設定ファイルはほぼいじったことがないのでいろいろ勉強してみます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問