2016-07-29 33 views
0

Ich war es leid, js und css lib manuell jedes Mal zu downloaden, dann spring ich in npm und webpack, als ich ein reaktives Projekt begann. Aber es gibt einige awkwark:Smart js lib mit CSS in Webpack importieren

  1. Mit npm install ist in Ordnung, aber ich muss wissen, wo css/js/SCSS platziert, können sie sein:

    node_modules\materialize-css\sass\materialize.scss 
    node_modules\materialize-css\dist\js\materialize.min.js 
    node_modules\sweetalert\dist\sweetalert.min.js 
    node_modules\sweetalert\dist\sweetalert.css 
    node_modules\hint.css\hint.min.css 
    ... 
    

    ich noch gefunden brauchen den richtigen Pfad durch selbst, und wie vor bei index.js, zu index.html oder Import hinzufügen, aber es hat die Zeit reduzieren für die Suche Download-Link lib)

  2. es gibt viele js lib CSS-Datei enthalten, aber webpack ist nicht so einfach, eine lib hinzufügen wi th beide css und js:

    Wie webpack-import-bootstrap-js-and-css, muss so viel config code hinzufügen, um css import, warum ich nicht nur die css unter index.html? Es ist nur eine Zeile. Allerdings separate js, css-Import in andere Datei fühle mich auch unwohl.


Ich hoffe, es ist ein Weg, wie:

  1. npm installieren --save sweetalert

  2. add webpack Config, so etwas wie (keine Notwendigkeit Struktur eines wissen lib):

    ... 
    new webpack.ProvidePlugin({ 
        swal: "sweetalert", 
        use_css: true, // false for someone need custom theme 
        use_js: true 
    }), 
    ... 
    

Aber ich habe jetzt keinen guten Weg gefunden.

Antwort

0

Sie können einen Pfad zur .css-Datei angeben. Dies funktioniert für mich:

import swal from 'sweetalert' 
import 'sweetalert/dist/sweetalert.css'