WebpackでUIkitを使用できません

webpackでプロジェクトを設定するだけです。ただ、私は、NPMは、すべてがうまく動作開始実行、私はコードWebpackでUIkitを使用できません

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.12/css/uikit.min.css" /> 
</head> 
<body> 

<ul uk-accordion> 
    <li class="uk-open"> 
     <h3 class="uk-accordion-title">Item 1</h3> 
     <div class="uk-accordion-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
    </li> 
    <li> 
     <h3 class="uk-accordion-title">Item 2</h3> 
     <div class="uk-accordion-content"> 
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p> 
     </div> 
    </li> 
    <li> 
     <h3 class="uk-accordion-title">Item 3</h3> 
     <div class="uk-accordion-content"> 
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p> 
     </div> 
    </li> 
</ul> 

<script src="dist/main.js"></script> 
</body> 
</html>

白の下に書く私のメインのHTMLファイルに

import 'jquery'; 
import 'uikit/dist/js/uikit.js';

を使用する私のメインのjsファイルに npm install uikit --save

でのUIKitをインストール.. しかしUncaught ReferenceError：UIkitは定義されていません。私は行方不明何

Error picture is here. click on me

...助けてくれてありがとう。

出典

2017-02-23 Anam

'インポートUIkitから' uikit/dist/js/uikit.js '; '？ –

試しましたが動作しません。同じ問題。 – Anam

私のgithub repoリンクはhttps://github.com/anamwp/style-switcherです。 – Anam

UIKitはwindowオブジェクトにその内容を必要とします。だから、これはmain.jsでそれを行うには素朴な方法かもしれません：

import Vue from 'vue'; 
import UIkit from 'uikit'; 
import Icons from 'uikit/dist/js/uikit-icons'; 
import jQuery from 'jquery'; 
import App from './App'; 

UIkit.use(Icons); 

window.jQuery = jQuery; 
window.UIkit = UIkit; 

module.exports = new Vue({ 
    router, 
    el: '#app', 
    template: '<App/>', 
    components: { App }, 
    store, 
});

代わりに、より良い解決策はthis SO answerあたりとして、WebPACKのコンフィグを編集することのようです。これは私のために働く：

{ 
    test: require.resolve('jquery'), 
    loader: 'expose-loader?jQuery!expose-loader?$' 
    }, 
    { 
    test: require.resolve('uikit'), 
    loader: 'expose-loader?UIkit' 
    }

出典

2017-04-02 15:55:35 allanberry

WebpackでUIkitを使用できません

答えて

関連する問題