Пример загрузки статических файлов CSS из node_modules с помощью webpack?

Я не знаю, как загрузить с помощью webpack любой CSS из node_modules libs, например, я установил листок и каждая попытка загрузки 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")]
};

Где загрузить sheetlet.css, прокомментированный require('leaflet/dist/leaflet.css') дает мне следующую ошибку:

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

SyntaxError: Unexpected token .

Ответы

Ответ 1

Для пользователей, столкнувшихся с подобной проблемой, есть шаги, которые я сделал, чтобы заставить его работать, я не уверен, что этот равновесный способ.

  • npm install file-loader --save
  • добавить import 'leaflet/dist/leaflet.css'; в main app.js
  • измените 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")]
};

В начале я получил эту конфигурацию из некоторого примера, и она не на 100% понятна, почему я использовал ExtractTextPlugin для загрузки scss и что такое корреляция с css-загрузчиком, возможно, чтобы быть более последовательным, следует также использовать ExtractTextPlugin в этой части, может быть, кто-то знает и может проверить код? Но мое решение работает, и я могу работать дальше.