Javascript 如何使用webpack从node_模块加载静态CSS文件的示例？

我不知道如何从node_模块库加载任何CSS，例如，我安装了传单，每次尝试加载

传单/dist/传单。CSS

都失败

您能否提供如何从node_模块加载静态样式的示例

我当前的网页配置如下。另外，我正在使用

extract text webpack plugin

和

sass loader

我的项目scss文件运行良好，我还有

css loader

，我是否需要解析静态css文件或向

stylepathsolves

添加一些内容

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

在何处加载传单.css，注释掉的

require（'laople/dist/laople.css'）

给出了以下错误：

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

SyntaxError: Unexpected token .

---

对于遇到类似问题的用户，我已经采取了一些步骤来让它工作，我不确定这种平衡方式是否可行

npm安装文件加载器--保存

添加

import'传单/dist/传单.css'在main app.js中

通过以下方式更改webpack.config.js：

添加

css加载器

以删除

语法错误：意外标记。

然后添加

文件加载器

，并匹配文件以删除

未捕获错误：找不到模块。“/images/layers.png”

：

一开始，我从一些例子中得到了这个配置，现在还不是100%清楚我为什么使用

ExtractTextPlugin

来加载SCS，以及它与css加载程序的关系是什么，也许为了更连贯，我应该在这一部分中也使用ExtractTextPlugin，也许有人知道并且可以查看代码？但我的解决方案正在发挥作用，我可以进一步工作。

我必须做：

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

您还必须在

index.js

或

main.js

中导入CSS文件（或调用主js文件的任何内容）。否则，您会收到一个错误，说明

module.exports是只读的

更新的

webpack.config.js

代码段如下：

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

---

谢谢@luzny！如果你愿意，你可以接受自己的答案；）我已经为这个问题挣扎了几天，尽管我永远无法导入bootstrap.css文件。在添加图像和字体测试规则后，它删除了我的错误。我想说的是你救了我兄弟！如果上帝是我们中的一员，他的名字将是‘尤兹尼’——这只不过是事实而已。我已经试了好几天了。愿上帝与你同在，祝你一生健康，兄弟！这是更好的解决方案。加载程序应该只添加到dev中，并且它使用新的config格式。

import 'leaflet/dist/leaflet.css';

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