8

Rails 4 アプリで material-ui コンポーネント ライブラリを使用したいと考えています。現在、react-rails gem を使用して、アセット パイプラインに .jsx コンパイルを追加しています。次のように、gemfile に rails-assets を介して material-ui を追加しました。

source 'https://rails-assets.org' do
  gem 'rails-assets-material-ui'
end

そして、次のように application.js ファイルにライブラリが必要です。

//= require material-ui

ただし、「ファイル 'material-ui が見つかりませんでした」というエラーが表示され続けます。React-Rails gem を使用して Rails アプリで material-ui コンポーネント ライブラリを使用するにはどうすればよいですか?

4

1 に答える 1

16

わかりましたので、これが私がこれまで取り組んできたことです...

私が追加したgemfileに：

gem 'react-rails'
gem "browserify-rails"

これにより、react ライブラリ、ヘルパー、jsx コンパイル、および require() 構文を使用して JS でモジュールを要求する機能が提供されます。browserify-rails を使用すると、package.json ファイルを介して Rails アセットに npm モジュールを要求することもできます。

この package.json ファイルを使用して、material-ui ライブラリをアプリに追加できます...

"dependencies" : {
    "browserify": "~> 10.2.4",
    "browserify-incremental": "^3.0.1",
    "material-ui": "0.13.1"
  },

material ui ライブラリは require 構文を使用して、すべての異なる jsx コンポーネント ファイルを正しい順序で結合するため、browserify-rails を使用する必要があります。

次に、react コードをまとめるために、asset/javascripts に /react という名前の新しいディレクトリを作成しました...

react
    L /components
    L react.js
    L react-libraries.js
    L theme.js

「material-ui」依存関係の一部として、react ライブラリがあります。これは、現時点でライブラリのコピーが 2 つあることを意味します。1 つは「react-rails」ジェムから、もう 1 つは「browserify-rails」の「material-ui」ライブラリ依存関係から。「material-ui」依存関係からのものを使用し、「react-rails」からのものを残します。

react.js で:

//= require ./react-libraries
//= require react_ujs
//= require_tree ./components

次に、react-libraries.js で

//React Library
React = require('react');
//Material Design Library
MaterialUi = require('material-ui/lib');
injectTapEventPlugin = require('react-tap-event-plugin'); injectTapEventPlugin();
//Material Design Library Custom Theme
MyRawTheme = require('./theme');
ThemeManager = require('material-ui/lib/styles/theme-manager');

次に、これらすべてをアセット パイプラインに含めたいと考えています...

//= require react/react

application.js で。

/react/components/ の jsx ファイルにコンポーネントを記述できるようになりました。

//Custom Components Namespace
Components = {};

react-libraries.js で

次のように、theme.js でテーマをカスタマイズできます...

Colors = require('material-ui/lib/styles/colors');
ColorManipulator = require('material-ui/lib/utils/color-manipulator');
Spacing = require('material-ui/lib/styles/spacing');

module.exports = {
  spacing: Spacing,
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: Colors.grey300,
    primary2Color: Colors.grey300,
    primary3Color: Colors.lightBlack,
    accent1Color: '#01A9F4',
    accent2Color: Colors.grey100,
    accent3Color: Colors.grey500,
    textColor: Colors.darkBlack,
    alternateTextColor: Colors.white,
    canvasColor: Colors.white,
    borderColor: Colors.grey300,
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3)
  }
};

それが役立つことを願っています:)

于 2015-11-11T20:32:30.113 に答える