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

Z时代
2024-01-10
分类：问答

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

回答：

对于遇到类似问题的用户，我已经采取一些步骤使其正常运行，但我不确定这种平衡方式。

npm install file-loader --save

import 'leaflet/dist/leaflet.css';在主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")]
};