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;
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/05 03:23