web-dev-qa-db-fra.com

Exemple de chargement de fichiers CSS statiques à partir de node_modules à l’aide de webpack?

Je ne sais pas comment charger avec Webpack les feuilles CSS des bibliothèques node_modules. Par exemple, j'ai installé un dépliant et chaque tentative de chargement leaflet/dist/leaflet.css échoue.

Pourriez-vous donner un exemple sur la façon de charger des styles statiques à partir de node_modules?

Ma configuration actuelle de Webpack ci-dessous. De plus, j'utilise extract-text-webpack-plugin et sass-loader mes fichiers scss de projet fonctionnent bien, j'ai aussi css-loader, dois-je résoudre les fichiers CSS statiques ou ajouter quelque chose à stylePathResolves?

//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")]
};

Où charger leaflet.css, commenté require('leaflet/dist/leaflet.css') me donne l'erreur suivante:

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

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

Pour les utilisateurs qui ont rencontré un problème similaire, il y a des étapes que j'ai faites pour le faire fonctionner, je ne suis pas sûr que cette manière d'équilibre.

  1. npm install file-loader --save
  2. ajouter import 'leaflet/dist/leaflet.css'; dans l'app.js principale
  3. changez webpack.config.js de la manière suivante:

ajoutez css-loader pour vous débarrasser de SyntaxError: Unexpected token . et ensuite ajoutez file-loader et faites correspondre les fichiers pour vous débarrasser de Uncaught Error: Cannot find module "./images/layers.png":

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")]
};

Au début, j’ai eu cette configuration à partir d’un exemple et il n’est pas clair à 100% pourquoi j’ai utilisé ExtractTextPlugin pour charger scss et quelle est la corrélation avec css-loader, peut-être pour être plus cohérent si j’utilise ExtractTextPlugin également dans cette partie, quelqu'un sait et peut réviser le code? Mais ma solution fonctionne et je peux travailler plus loin.

12
luzny

Je devais faire:

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

Si je n'ai pas configuré le chargeur de fichiers pour les images, j'ai eu:

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

Vous devez également importer le fichier CSS dans votre index.js ou main.js (ou le nom de votre fichier JS principal). Sinon, vous obtenez une erreur en disant que module.exports is read-only.

import 'leaflet/dist/leaflet.css';

Un extrait webpack.config.js plus mis à jour est:

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