Bootstrap Материал Дизайн с Webpack

, возможно, на самом деле новичком WebPack вопрос, но здесь я иду:Bootstrap Материал Дизайн с Webpack

Было интересно (так как я действительно нету нашел никаких прямых ответов), если кто-то может дать мне подсказку о том, как получить bootstrap material design работает? Я получаю CSS материала будет для меня, но не в ripples.js материале ...

моих настроек WebPack, а биты этого:

... 
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], 
module: { 
loaders: [ 
     { test: /\.js?$/, exclude: /(node_modules|bower_components)/, loader: 'babel' }, 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
     { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" } 
] 
} 
...

в РЕАКТЕ index.js моего, где это все начинается :

... 
import Bootstrap from 'bootstrap/dist/css/bootstrap.css' 
require('bootstrap-material-design/dist/css/bootstrap-material-design.css') 
require('bootstrap-material-design/dist/css/ripples.min.css') 
...

Как получить материал.js и ripples.js для работы?

У меня нет ошибок в консоли или ошибок в веб-папке, но рябь не проявляется! Я предполагаю, что есть способ веб-пакета smart, чтобы все это выполнялось или мне нужно явно указать .js в моем index.js (это не сработало)?

спасибо заранее,

hanto899

UPDATE: если я потребуется следующее в моем index.js файле:

require('bootstrap/dist/css/bootstrap.css') 
require('bootstrap-material-design/dist/css/bootstrap-material-design.min.css') 
require('bootstrap-material-design/dist/css/ripples.min.css') 

require('bootstrap') 
var material = require('bootstrap-material-design/dist/js/material.js') // not sure if the "var material =" is necessary here... 
var ripples = require('bootstrap-material-design/dist/js/ripples.js') // not sure if the "var material =" is necessary here... 

let $ = require('jquery') 
$.material.init()

я не получаю ошибки, но пульсация не работает , но ... если я перейти на другую страницу, и добавить, в то время как на этой странице,:

let $ = require('jquery') 
$.material.init()

WebPack горячие перезагружается, а затем я получаю рябь работу. Howerver если я обновить страницу, я получаю:

Uncaught TypeError: Cannot read property 'init' of undefined

....

источник

2016-08-05 hanto899

вы можете YSE требовать для получения их в вашем приложении через WebPack. –

Вы решили? –

Я решил его и обновил свой ответ, пожалуйста, взгляните на это (здесь мое тестовое репо) (https://github.com/jorawarsingh/es6-webpack-bootstrap-material-design) попробуйте! –

Наконец, я получил это работает.

Вы можете просто импортировать их следующим образом

import "bootstrap/dist/css/bootstrap.css"; 
import "bootstrap-material-design-master/dist/css/bootstrap-material-design.css"; 
import "bootstrap-material-design/dist/css/ripples.css"; 
import "bootstrap-material-design-master/dist/js/material.js"; 
import 'bootstrap-material-design-master/dist/js/ripples.js';

Тогда вам нужно вызвать

$.material.ripples()

$ .material.ripples() будет применяться ripples.js к элементам по умолчанию.

источник

2016-08-05 20:00:16

Это я предполагаю в файле index.js? и затем, что, я использую это явно или работает, поскольку связывание будет сортировать зависимости этих двух переменных? – hanto899

комплект будет сортировать. webpack дает уникальный идентификатор каждому требуемому файлу, поэтому он не смешивается. –

hmm, до сих пор нет рябь, я пытаюсь: – hanto899

Вышеуказанный ответ @MrJSingh и @Rob Kielty не работал для меня.

Итак, я внесла необходимые изменения. Надеюсь, это поможет.

В вашем файле точки входа (т. Е. Индексе.JS в моем проекте), импортировать файлы следующим

import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.min.css'; 
import '!style-loader!css-loader!bootstrap-material-design/dist/css/bootstrap-material-design.min.css'; 
import '!style-loader!css-loader!bootstrap-material-design/dist/css/ripples.min.css'; 
import 'bootstrap-material-design/dist/js/material.min.js'; 
import 'bootstrap-material-design/dist/js/ripples.min.js';

Затем вызовите

$.material.init();

Найти моя конфигурация WebPack является here

источник

2017-03-23 12:35:20

Bootstrap Материал Дизайн с Webpack

ответ

Смежные вопросы