如何使用webpack从node_modules加载静态CSS文件的示例？

Question

如何使用webpack从node_modules加载静态CSS文件的示例？

javascriptcsswebpackwebpack-style-loader

18

我不知道如何使用webpack从node_modules库中加载任何CSS，例如我已经安装了leaflet，并且每次尝试加载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 .

- luzny

2个回答

4

我需要做的是：

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（或者你主要的JS文件叫什么就用什么）中导入CSS文件。否则，你会得到一个错误，说module.exports是只读的。

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' ] },
        ],
    },

- Daniel Gray

这是更好的解决方案。加载器应该仅在开发环境中添加，并且它使用新的配置格式。 - Paweł Szczur

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- luzny · Accepted Answer

对于遇到类似问题的用户，我已经采取了一些步骤来解决它，但我不确定这是平衡的方法。

npm install file-loader --save
在主app.js中添加import 'leaflet/dist/leaflet.css';
按照以下方式更改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-loader 的关联是什么，也许更连贯的做法是在这部分也使用 ExtractTextPlugin，也许有人知道并能进行代码审查？但我的解决方案已经在工作，我可以继续工作。