web-dev-qa-db-ja.com

webpackを使用してnode_modulesから静的CSSファイルをロードする方法の例？

Node_modules libsからCSSをWebpackでロードする方法がわかりません。たとえば、リーフレットをインストールしていて、ロード_leaflet/dist/leaflet.css_の各試行が失敗します。

Node_modulesから静的スタイルをロードする方法の例を提供できますか？

以下の私の現在のwebpack構成。さらに、_extract-text-webpack-plugin_と_sass-loader_を使用しています。プロジェクトのscssファイルは正常に機能しています。_css-loader_もあり、静的なcssファイルを解決するか、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")]
};
_

Leaflet.cssをどこにロードするか、コメントアウトしたrequire('leaflet/dist/leaflet.css')を使用すると、次のエラーが発生します。

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

SyntaxError: Unexpected token .
_
javascriptcsswebpackwebpack-style-loader
17
luzny

同様の問題に遭遇したユーザーのために、それを機能させるために私が実行したステップがあります。この平衡の仕方が確かではありません。

  1. npm install file-loader --save
  2. メインのapp.jsにimport 'leaflet/dist/leaflet.css';を追加
  3. 以下の方法でwebpack.config.jsを変更します。

css-loaderを追加してSyntaxError: Unexpected token .を削除し、次にfile-loaderを追加してファイルを照合し、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")]
};

初めにいくつかの例からこの構成を取得しましたが、ExtractTextPluginを使用してscssをロードした理由とcss-loaderとの相関関係が100％明確ではありません。この部分では、誰かが知っていてコードレビューを行うことができますか？しかし、私の解決策は機能しており、さらに作業することができます。

13
luzny

私がしなければなりませんでした：

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

画像のファイルローダーを構成しなかった場合、次の結果が得られました。

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

また、CSSファイルをindex.jsまたはmain.js（またはメインのJSファイルが呼び出されるもの）にインポートする必要があります。それ以外の場合は、エラーが発生しますmodule.exports is read-only。

import 'leaflet/dist/leaflet.css';

より更新されたwebpack.config.jsスニペットは次のとおりです。

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