无法在React项目中导入materialize-css以使用Chips

Question

我按命令创建了项目：

create-react-app app

我正在使用materialize-css http://materializecss.com/，并希望使用芯片http://materializecss.com/chips.html 。

import React, { Component } from 'react';
import $ from 'jquery';
import 'materialize-css';

class Form extends Component {
    constructor(props) {
        super(props);
        $(document).ready(function() {
            $('.chips').material_chip({
                data: [{
                   tag: 'Apple',
                }, {
                   tag: 'Microsoft',
                }, {
                   tag: 'Google',
                }],
            });
        });
    }
    render() {
        return (
            <div>
                <div className="chips"></div>
                <button>Add</button>
            </div>
        )
    }
}

我试图导入：

import 'materialize-css/bin/materialize.css'
import 'materialize-css/bin/materialize.js'

但它不起作用。 浏览器抛出错误：

Uncaught TypeError: $(...).material_chip is not a function

Answer 1

在您的条目JS文件中尝试此操作

import 'materialize-css'; // It installs the JS asset only
import 'materialize-css/dist/css/materialize.min.css';

你完成了！

---

更新：我已经提供了所有必要的细节以使您的代码正常工作。 试试吧

index.jsx文件在这里

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';

class Form extends Component {
  constructor(props) {
    super(props);
    $(document).ready(function() {
      $('.chips').material_chip({
        data: [{
          tag: 'Apple',
        }, {
          tag: 'Microsoft',
        }, {
          tag: 'Google',
        }],
      });
    });
  }
  render() {
    return (
        <div>
          <div className="chips"></div>
          <button>Add</button>
        </div>
    )
  }
}
ReactDOM.render(<Form />, document.getElementById('app'));

和package.json就好

"dependencies": {
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "font-loader": "^0.1.2",
    "jquery": "^3.1.1",
    "materialize-css": "^0.97.8",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "redux": "3.6.0",
    "style-loader": "^0.13.1"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "webpack-hot-middleware": "^2.15.0"
  }

和webpack.config.js是

const webpack = require('webpack');

module.exports = {

  entry: [Screenshot from 2017-01-15 18-11-16
    "./src/index.jsx",
    "webpack-dev-server/client?http://localhost:3000/",
    "webpack/hot/only-dev-server"
  ],

  output: {
    filename: "bundle.js",
    path: __dirname + '/public'
  },
  devServer: {
    contentBase: './public',
    port: 3000
  },

  // Bundle lookup dir for included/imported modules
  // By default, bundler/webpack with search here for the scripts
  resolve: {
    modulesDirectories: ['node_modules', 'src'],
    extensions: ['', '.js', '.jsx']
  },


  // make sure you added babel-loader to the package
  // npm i babel-loader babel-core babel-preset-es2015 -D
  module: {
    loaders: [
      {
        test: /\.js[x]?$/, // Allowing .jsx file to be transpiled by babel
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },
      { test: /\.css$/, loaders: [
        'style',
        'css?importLoaders=1',
        'font?format[]=truetype&format[]=woff&format[]=embedded-opentype'
      ] },
      { test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file-loader?name=fonts/[name].[ext]' }
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]

};

没有任何错误。

Answer 2

使用NPM：

第1步：安装实体化

如果您使用的是npm，请确保使用其文档中列出的命令安装materialize：

npm install materialize-css@next 

最后不要错过 ' @nex t'。 安装的版本类似于：“^ 1.0.0-rc.2”或“^ 1.0.0-alpha.4”

第2步：导入实现：

import 'materialize-css/dist/css/materialize.min.css'

import M from 'materialize-css/dist/js/materialize.min.js'

要么

import 'materialize-css/dist/css/materialize.min.css'

import M from 'materialize-css'

为了使css导入起作用，您需要一个css加载器 。 请注意，此加载器已包含在使用create-react-app构建的项目中，因此您无需执行后续步骤。 相反，如果您使用自定义webpack配置，则运行：

npm install --save-dev style-loader css-loader

现在在webpack配置中添加css-loader和style-loader

const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "build")
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env", "react"]
                    }
                }
            }
        ]
    }
}

现在，您可以单独初始化组件，或者使用M.AutoInit（）一次初始化组件;

---

随着CDN：

在HTML文件中添加以下内容。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

然后，在webpack配置中，添加外部： https ：//webpack.js.org/configuration/externals/