我按命令创建了项目:
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 () } }
我试图导入:
import 'materialize-css/bin/materialize.css' import 'materialize-css/bin/materialize.js'
但它不起作用.浏览器抛出错误:
Uncaught TypeError: $(...).material_chip is not a function
illusionist.. 14
在您的条目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 (, document.getElementById('app'));) } } ReactDOM.render(
而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() ] };
没有任何错误.
在您的条目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 (, document.getElementById('app'));) } } ReactDOM.render(
而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() ] };
没有任何错误.