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

2024-04-30

我不知道如何使用 webpack 从 node_modules 库加载任何 CSS,例如我已经安装了 leaflet 以及每次尝试加载leaflet/dist/leaflet.css fails.

您能提供如何从node_modules加载静态样式的示例吗?

我当前的 webpack 配置如下。另外我正在使用extract-text-webpack-plugin and 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 .

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

  1. npm install file-loader --save
  2. add import 'leaflet/dist/leaflet.css';在主app.js中
  3. 通过以下方式更改 webpack.config.js:

add 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 ,也许有人知道并且可以进行代码审查?但我的解决方案正在发挥作用,我可以进一步工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 webpack 从 node_modules 加载静态 CSS 文件的示例? 的相关文章

  • Web 组件 - 服务/非 html 组件

    所以我来自 Angular 想看看如何创建vanilla Web components 现在 从 Angular 开始 我们倾向于将事物分开 组件 充当 HTML CSS 和一些 javascript 然后是 服务 主要负责收集数据和执行不
  • javascript jquery 使用脚本更改脚本的src

    我有一个 JavaScript 脚本 它有一个 src 元素 这个 src 是一个 url 我想使用 javascript 更改它 一次更改为其他内容 或者动态创建它 使用 javascript jquery 动态创建脚本元素的最佳方法是什
  • 确定元素是在页面折叠上方还是下方

    我有一些页面有多个输入框 用户可以在其中输入文本 在单击 下一步 按钮之前 需要填写其中一些内容 我弹出验证错误供用户查看 但是如果问题不在页面上 我希望页面滚动到它 而不是他们必须搜索丢失 错误的字段 我有一个滚动到位 但我无法确定要滚动
  • 如何用javascript正确读取php cookies

    考虑这个 php 和 javascript 代码 然后我在控制台中看到的是 utma 111872281 291759993 1444771465 1445374822 1445436904 4 utmz 111872281 1444771
  • 如何在 HTML / Javascript 页面中插入 PHP 下拉列表

    好吧 这是我的第二篇文章 请接受我是一个完全的新手 愿意学习 花了很多时间在各个网站上寻找答案 而且我几乎已经到达了我需要到达的地方 至少在这一点上 我有一个网页 其中有许多 javascript 函数 这些函数一起使用 google 地图
  • 使用 JavaScript 生成 PDF 文件

    我正在尝试将 XML 数据从网页转换为 PDF 文件 并且希望能够完全在 JavaScript 中完成此操作 我需要能够绘制文本 图像和简单的形状 我希望能够完全在浏览器中完成此操作 我刚刚写了一个名为jsPDF https github
  • 在 jQuery 可排序中对多个选定项目进行排序?

    我试图在 jQuery 可排序集中选择多个项目 然后将选定的项目一起移动 这是我的弱点开始尝试使其发挥作用 http jsfiddle net benstenson CgD8Y 这是代码 HTML div class container d
  • 如何调用 google 的 getBasicProfile() 来仅单击按钮即可登录 google?

    我在我的网站上使用谷歌登录
  • 如何更改自动完成中的结果过滤器?

    我不想进行字面匹配 而是想通过正则表达式选择结果 我可以覆盖自动完成的默认行为来完成此任务还是需要替代结构 有一个内置的方法可以做到这一点 只需提供一个函数source http jqueryui com demos autocomplet
  • Google 地图 API:忽略 DirectionService 请求中的季节性限制

    我目前正在开发一张地图 其中显示两点之间的最短路线 使用不同的交通工具 我注意到 有时 例如在冬季关闭的道路不会被考虑在内 我发现我可以使用方向服务 下面的代码 忽略高速公路 收费站和渡轮 但我一生都无法弄清楚如何 是否可以忽略季节性限制
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • 计算文本选择的 xy 位置

    我正在尝试使用 DOM 元素创建自己的文本选择 是的 我的意思是当您在此元素中选择文本时 您会在文本后面看到蓝色背景 这个想法是停止默认行为 蓝色 并使用我自己的元素来完成工作 方法是找到选择的 xy 位置 然后放置绝对定位的元素 我希望能
  • @font-face 和 font-variant 是个坏主意吗?

    如果我使用 font face字体和font variant small caps对于相同的选择器 字体将回退到 Safari 中的下一个系统默认字体 我该如何解决这个问题 我一开始在创建一个示例来复制您的问题时遇到了一些麻烦 这让我意识到
  • Ember Data 中出现“超出最大调用堆栈大小”错误的原因可能是什么?

    Ember 发布新版本 3 6 0 后 我开始在控制台中收到错误 rsvp js 24 未捕获 RangeError 超出最大调用堆栈大小 在 WeakMap get 在 getCacheFor metal js 25 在 Computed
  • 如何强制外部 div 扩展到内部 div 的高度?

    我有 ajax 到的数据 div class content 我希望外部 div 扩展到内部 div 的高度 我不知道该怎么做 HTML div class outer div class inner div class content S
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • mozilla pdf.js 没有全视图

    我喜欢这个 pdf 查看器https github com mozilla pdf js https github com mozilla pdf js Demo http mozilla github com pdf js web vie
  • Node.js - 重载函数

    有没有一种方法可以重载node js中的函数 类似于 noSuchMethod https developer mozilla org en JavaScript Reference Global Objects Object noSuch
  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签?

    for var i 0 i
  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu

随机推荐

  • 加速Cuda程序

    要更改哪一部分来加速此代码 代码到底在做什么 global void mat Matrix a Matrix b int tempData new int 2 tempData 0 threadIdx x tempData 1 blockI
  • 在 C 中实现逻辑右移

    我正在致力于仅使用按位运算符在 C 中创建逻辑右移函数 这是我所拥有的 int logical right shift int x int n int size sizeof int size of int arithmetic shift
  • 为什么嵌套 Java 类不能从 Scala 导入?

    我应该如何使用嵌套 Java 类来模拟斯卡拉莫克 特别是当所说的嵌套 Java 类来自第三方库时 鉴于以下来源 src main java Outer java Outer class that offers a Nested class
  • 如何使用 tf-idf 选择停用词? (非英语语料库)

    我已经成功评估了tf idf 函数 http en wikipedia org wiki Tf idf对于给定的语料库 如何找到每个文档的停用词和最佳词 据我所知 给定单词和文档的 tf idf 较低意味着它不是选择该文档的好单词 停用词是
  • VSTS 构建失败并显示 MSB4184 路径不是合法形式

    我正在尝试使用 VSTS 中的构建系统来构建和部署 c net Web 应用程序 我创建了一个新的单项目解决方案 因为似乎没有任何方法可以指定在多项目解决方案中构建 部署哪个项目 并设置我的构建定义以指向这个新解决方案 我已将其设置为使用
  • java.library.path 中没有字体管理器

    以下代码在我的桌面上运行得很好 BufferedImage image new BufferedImage width height BufferedImage TYPE INT RGB Graphics g image getGraphi
  • 修改 SIR 模型以包含随机性

    我正在尝试通过将真实流行曲线与随机 SIR 模型的模拟进行比较来建立一种估计传染病参数的方法 为了构建随机 SIR 模型 我使用 deSolve 包 而不是使用固定参数值 我想从以原始参数值为中心的泊松分布中绘制每个时间点方程中使用的参数值
  • If 语句不遵循其条件

    在我的滚动代码中 您只需编写 r 然后按 Enter 键 但似乎不会读取该内容并转到重新启动 while 循环的 else 让它滚动的唯一方法是输入除 r 之外的其他内容 而不是 standard in 1 解析错误 bin bash th
  • 模板编译错误 - 没有匹配的调用函数

    我正在尝试将字符串转换为数字 为此 我找到了以下方法 include
  • 是否可以从C语言函数写入word文件?

    我有一个用 C 语言编写的图书馆管理系统 其中有 I O 文件 dat 如何从该函数中获取word文件的输出 void viewbooks void show the list of book persists in library int
  • 为什么如果条件无法比较负整数和正整数[重复]

    这个问题在这里已经有答案了 include
  • gsub的时间复杂度

    一根长绳子s仅包含0 and 1 这段 Ruby 代码计算了有多少个1有 s gsub 1 count Big O 表示法的时间复杂度是多少 有没有一个工具可以进行计算 据我所知 没有一个通用工具可以计算任意代码的 Big O 表示法 这将
  • 错误:数组不得包含空值 PostgreSQL

    我的查询是 SELECT id ARRAY AGG session os integer FROM t GROUP BY id HAVING ARRAY AGG session os integer ARRAY 1 NULL 它正在给予ER
  • 将基类添加到现有原型链中,以便instanceof工作

    我有一个现有的原型层次结构 我想对其进行修改 以便保持层次结构完整 但在其末尾添加了一个额外的原型 instanceof应该对所有原型返回 true 即 假设我有 B gt A 我想将其设为 B gt A gt Base 现在instanc
  • 用几个 1 位 ALU 制作一个 4 位 ALU

    我正在尝试将几个 1 位 ALU 组合成一个 4 位 ALU 我对如何在 VHDL 中实际执行此操作感到困惑 这是我正在使用的 1 位 ALU 的代码 component alu1 define the 1 bit alu componen
  • 如何创建 TimescaleDB Hypertable,并在非唯一时间戳上进行时间分区?

    我刚刚开始使用 TimescaleDB 想要在包含事件的表上创建一个超表 最初我想到遵循以下常规模式 CREATE TABLE event id serial PRIMARY KEY ts timestamp with time zone
  • CSS 叠加在图像背景上

    我想在图像背景上叠加 以便更清楚地看到图像上方的白色文本 为什么不会这个解决方案 http codepen io anon pen aBJErm work HTML div class bg1 image cover p H p div C
  • Django Admin 中的自定义操作

    在我的 Django 应用程序中 我有一个新闻通讯模型 现在我希望能够send时事通讯 甚至resend它 来自 Django Admin 我可以用钩子来做到这一点Model save 方法 但还有另一种与模型无关的方法吗 Thanks 管
  • 使用 HttpClient 的 HTTP 请求太慢?

    我正在尝试编写一个 Android 应用程序 将一些发布值发送到托管在专用服务器上的 php 文件并存储数组结果 代码是这样的 HttpPost httppost DefaultHttpClient httpclient httppost
  • 如何使用 webpack 从 node_modules 加载静态 CSS 文件的示例?

    我不知道如何使用 webpack 从 node modules 库加载任何 CSS 例如我已经安装了 leaflet 以及每次尝试加载leaflet dist leaflet css fails 您能提供如何从node modules加载静