wake-up-neo.com

Beispiel für das Laden statischer CSS-Dateien von node_modules mithilfe von Webpack

Ich weiß nicht, wie ich mit webpack CSS von node_modules libs laden kann, zum Beispiel habe ich Flugblatt installiert und jeder Versuch von load leaflet/dist/leaflet.css schlägt fehl.

Könnten Sie ein Beispiel zum Laden statischer Stile von node_modules liefern?

Meine aktuelle Webpack-Konfiguration unten. Zusätzlich benutze ich extract-text-webpack-plugin und sass-loader meine Projekt-Scss-Dateien funktionieren gut. Ich habe auch css-loader. Muss ich statische CSS-Dateien auflösen oder etwas zu stylePathResolves hinzufügen?

//require('leaflet/dist/leaflet.css');

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var path = require('path');

var stylePathResolves = (
  'includePaths[]=' + path.resolve('./') + '&' +
  'includePaths[]=' + path.resolve('./node_modules')
)

module.exports = {
  entry: ".js/app.js",
  output: {
    path: "./static/js",
    filename: "app.js"
  },
  module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
      }, {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          'style',
          'css' + '!sass?outputStyle=expanded&' + stylePathResolves
        )
      }
    ]
  },
  plugins: [new ExtractTextPlugin("app.css")]
};

Wo die Datei leaflet.css geladen wird, gibt require('leaflet/dist/leaflet.css') folgende Fehlermeldung aus:

home/myproj/node_modules/leaflet/dist/leaflet.css:3
.leaflet-map-pane,
^

SyntaxError: Unexpected token .
javascriptcsswebpackwebpack-style-loader
14
luzny

Für Benutzer, die ein ähnliches Problem hatten, gibt es Schritte, die ich unternommen habe, um das Problem zu lösen. Ich bin mir nicht sicher, ob dieses Gleichgewicht möglich ist.

  1. npm install file-loader --save
  2. fügen Sie import 'leaflet/dist/leaflet.css'; in main app.js hinzu
  3. Ändern Sie die Datei webpack.config.js folgendermaßen:

fügen Sie css-loader hinzu, um SyntaxError: Unexpected token . zu entfernen, und fügen Sie als Nächstes file-loader hinzu, und passen Sie die Dateien an, um Uncaught Error: Cannot find module "./images/layers.png" zu entfernen.

module.exports = {
  entry: "./web/static/js/app.js",
  output: {
    path: "./priv/static/js",
    filename: "app.js"
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel'
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract(
        'style',
        'css' + '!sass?outputStyle=expanded&' + stylePathResolves
      )
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: 'file-loader'
    }]
  },
  plugins: [new ExtractTextPlugin("app.css")]
};

Am Anfang habe ich diese Konfig aus einem Beispiel erhalten und es ist nicht 100% klar, warum ich ExtractTextPlugin zum Laden von scss verwendet habe und welche Korrelation mit dem css-loader besteht jemand weiß und kann Code überprüfen? Aber meine Lösung funktioniert und ich kann weiter arbeiten.

12
luzny

Ich musste es tun:

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

Wenn ich den Dateilader nicht für die Bilder konfiguriert habe, bekam ich:

ERROR in ./node_modules/leaflet/dist/images/layers-2x.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/leaflet/dist/leaflet.css (./node_modules/css-loader!./node_modules/leaflet/dist/leaflet.css) 7:8888-8921
 @ ./node_modules/leaflet/dist/leaflet.css
 @ ./src/view/component/RouteMap.js
 @ ./src/index.js

ERROR in ./node_modules/leaflet/dist/images/layers.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/leaflet/dist/leaflet.css (./node_modules/css-loader!./node_modules/leaflet/dist/leaflet.css) 7:8716-8746
 @ ./node_modules/leaflet/dist/leaflet.css
 @ ./src/view/component/RouteMap.js
 @ ./src/index.js

ERROR in ./node_modules/leaflet/dist/images/marker-icon.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/leaflet/dist/leaflet.css (./node_modules/css-loader!./node_modules/leaflet/dist/leaflet.css) 7:9975-10010
 @ ./node_modules/leaflet/dist/leaflet.css
 @ ./src/view/component/RouteMap.js
 @ ./src/index.js

Sie MÜSSEN auch die CSS-Datei in Ihrem index.js oder main.js (oder wie Ihre Haupt-JS-Datei heißt) importieren. Andernfalls erhalten Sie eine Fehlermeldung, die besagt, dass module.exports is read-only.

import 'leaflet/dist/leaflet.css';

Ein aktualisiertes webpack.config.js-Snippet ist:

{
    ...
    module: {
        rules: [
            { test: /\.css$/, use: ["style-loader","css-loader"] },
            { test: /\.(png|svg|jpe?g|gif|woff2?|ttf|eot)$/, use: [ 'file-loader' ] },
        ],
    },
1
Daniel Gray