配置Webpack将LESS文件的目录构建成相应的CSS文件

2024-02-06

我希望使用 Webpack 编译我们所有的 less 文件/less to /public/css并将它们作为常规 css 包含在我们的服务器端模板中(not将文本粘贴到使用 ExtractText 插件或重载 require 中)。

也就是说,我正在尝试使用 Webpack + LESS 加载器或插件来 glob 来编译所有 .less 文件:

/less/foo.less /更少/bar.less /less/unknown-new-less-file.less ...

并将它们输出到

/public/css/foo.less /public/css/bar.less /less/unknown-new-less-file.less

然后我想通过使用拉入 css 文件将它们包含在我们的应用程序中<link rel="stylesheet" href="foo.css">

我尝试使用 Bash 脚本lessc而不是 Webpack,它工作得很好,但是当源文件发生变化时,我们无法自动重新编译 LESS。


问题是我使用 Webpack 作为任务运行程序,但事实并非如此。

我一直拒绝添加 Gulp 或 Make。 Gulp 是因为它会变成一个巨大的、无法维护的混乱,而 Make 尽管它很棒,因为它对团队来说有点难以学习。

我最终在 npm 脚本中使用了类似 fswatch 的东西来重新运行 lessc。

Less 文档建议使用 grunt、Gulp 或开发模式浏览器内解析:http://lesscss.org/usage/#using-less-in-the-browser-watch-mode http://lesscss.org/usage/#using-less-in-the-browser-watch-mode.

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

配置Webpack将LESS文件的目录构建成相应的CSS文件 的相关文章

  • 用于云服务“沙盒”的 SecurityManager

    All 我正在设计一个基于云的服务 该服务将提供执行客户提交的一些 插件 代码的选项 为了使这项工作正常进行 插件不能威胁系统完整性或有能力访问其他客户端的数据 这一点至关重要 理想情况下 我希望客户端能够提交一个简单的 jar 文件 包含
  • 带有 typescript 外部 commonjs 模块的 Webpack

    为了使下面的代码正常工作 我需要重复require rolesService 中的条款rolesView ts 或取消注释console log陈述 如果我没有这两行 则 webpack 不会在捆绑包中包含引用的 RolesService
  • ASP MVC Less 文件给出: 调用目标已引发异常

    我有一个简单的 asp net mvc 4 站点 使用较少的文件 当我在本地电脑上运行它时 它工作正常 但是当我将其发布到服务器时 我收到以下错误 During the output text content of processed as
  • 如何在 CKEditor 中更改已注册的对话框

    我正在尝试编写一个插件 向图像对话框添加一个附加选项卡 页面 我不想更改对话框的源本身 而是使用插件来增强它 我搜索文档和论坛已经有一段时间了 现在我知道我可以在对话框对象上调用 addPage 来添加另一个选项卡 我也了解内容对象必须是什
  • Webpack 2 的语义 UI 问题

    一直在努力使用 Webpack 2 进行语义 ui 设置 我遇到了一些与默认语义 ui 主题中的字体相关的错误 以及另一个关于image webpack loader ERROR in css loader lessPlugins opti
  • npm run build 上的 Babel-Loader 语法错误

    我对 webpack 不是很了解 正在尝试将 webpack 从 V3 更新到 V4 并设法将我的 webpack 配置更新到不会向我抛出折旧错误的程度 但我现在陷入了 babel loader 的语法错误 Module build fai
  • 如何在流体宽度容器中将左侧、中间和右侧的三个按钮放置在同一行?

    我在用着LESS在 Twitter Bootstrap 环境中 但我会直接接受CSS也有答案 Fluid width container Btn1 Btn2 Btn3 另一种宽度 Fluid width container Btn1
  • 如何使用 Webpack 同时创建包的“web”和“node”版本?

    有没有一种方法可以使用 Webpack 或 Browserify 一次性创建捆绑包的 web 和 node 版本 捆绑包的 web 版本将在客户端上使用 同一捆绑包的 节点 版本将在服务器上用于预渲染 同构 http nerds airbn
  • Vue Cli 3 禁用代码分割 - 无法删除哈希文件

    我有一个vue config js设置效果很好 并取消了默认的代码分割 但它仍然输出一个 CSS 文件 其哈希值与具有好名称的 CSS 文件相同 我可以编写一个脚本来删除它 但我想知道是否有一种方法可以将文件设置为不输出带有哈希的CSS文件
  • 文件更改时重新启动 Heroku 本地吗?

    看来以 heroku local web 启动的本地服务器不会监视文件更改并自行重新启动 我怎样才能让它做到这一点 最简单的方法是运行 nodemonheroku local作为可执行文件 即nodemon exec heroku loca
  • 使用 webpack 动态提供图像

    我有一个关于 webpack 和服务图像的问题 我有一个 webpack 配置 它构建了一个 React webapp 并且还提供来自特定文件夹的 jpg 文件 但是 如果我从我的网络应用程序下载新图像并将其添加到此文件夹中 会发生什么情况
  • CIFIlter 是否有替代方案可以在 watch os 6 中生成二维码

    我正在开发一个独立于手表的应用程序 我想在 watchkit 上生成二维码 但是由于 coreImage 不能与 watchkit 一起使用 我们还有其他方法可以做到这一点吗 Thanks 我使用支持 watchos 的库 例如EFQRCo
  • 如何从捆绑 .spec.js 文件中排除 webpack

    我的 Package bundle 读取 var reqContext require context true js reqContext keys map reqContext 其中基本上包括所有 js 文件 我希望表达式排除任何 sp
  • 编写 LESS 时,chrome 调试器中出现红点?

    我正在将 css 文件转换为 LESS 文件 我的 LESS 只有一部分运行良好 我在 chrome 调试器中看到那些有问题的行有一条奇怪的红点线 知道它们是什么意思吗 http codemirror net doc releases ht
  • 为什么要费心 CommonJS require.ensure() 中的依赖项列表?

    来自 Webpack 文档 https webpack github io docs api in modules html require ensure https webpack github io docs api in module
  • 为 Rails 3 应用程序制作自定义插件/gem/引擎

    我正在遵循指南http edgeguides rubyonrails org plugins html http edgeguides rubyonrails org plugins html而且它似乎有点过时了 您能看一下并告诉我哪些部分
  • Angular 5 webpack 3 aot

    我正在尝试使用 webpack 3 和 Angular 5 进行 aot 构建 但是网上有很多教程 没有一个没有问题地显示完整的示例 到目前为止我已经有了以下配置 对于那些对路径有疑问的人 我在 java 应用程序中使用它 webpack
  • 使用 Documents4j 将 Doc 转换为 PDF

    我想尝试使用 Documents4j 将文档转换为 PDF 我按照此处的说明进行操作http documents4j com develop http documents4j com develop 当我打字时mvn package然后按回
  • 找不到模块“webpack”

    决定不在我的项目中使用 webpack 当我把它从package json出现以下错误ng s 找不到模块 webpack 错误 找不到模块 webpack 在 Function Module resolveFilename 内部 modu
  • 使用HTMLWebpackPlugin时如何通过webpack加载图片?

    我正在使用 HTMLWebpackPlugin 在我的模板中我有一个 img 标签 img src images logo png 如果您注意到 这里我使用相对路径 认为 webpack 将触发在 webpack config js 文件中

随机推荐

  • 如何在单独的文件中创建命名查询

    我需要将所有命名查询保存在一个单独的文件中 例如 javax persistence NamedQueries NamedQuery name Employee findAll query SELECT e FROM Employee e
  • web.config 中与 targetFramework 相关的配置错误

    我在 Visual Studio 2015 中制作了一个 MVC 网站 它可以在我的本地主机上运行 但是当我发布我的网站并放入我的主机时 它不起作用 它给了我这个错误通知 应用程序中的服务器错误 配置错误 解析器错误消息 targetFra
  • FFmpeg 使用 URL 进行文件转换

    我需要将 MP4 转换为 AVI MP4 视频上传到 Windows Azure Blob 存储中 并且存储可公开访问 当我们编写 ffmpeg 命令行时我的问题 我可以提供 Blob 存储中视频的 URL吗 ffmpeg ihttps a
  • 用于重试同一请求的 HTTP 状态码

    是否有 HTTP 状态代码来指示客户端再次执行相同的请求 我面临着服务器在处理请求时必须 等待 锁消失的情况 但当锁消失时 请求可能会接近其超时限制 因此 一旦锁定清除 我想指示客户端再次执行相同的请求 我想出的最好的办法是使用 HTTP
  • Angular 将特定数据检索到 $scope 变量中不起作用

    我这里初始化 scope statuses 然后 如果我只是将 http get 中的数据设置为 scope 变量 那么 有效 但我需要对其进行更多过滤 scope statuses result data Devices console
  • 如何在c99中使用ftruncate而不发出警告

    我想在我的代码中使用 ftruncate 函数 我必须使用选项 std c99 进行编译 我收到警告 In function test warning implicit declaration of function ftruncate W
  • 将 gtfs 实时数据流式传输为人类可读的格式

    我正在尝试使用 Java 下载可读的 gtfs 实时数据 协议缓冲区格式 以便我可以在文本文件中查看它 我尝试了几种方法 方法 1 URL url new URL uri byte buffer new byte 4096 InputStr
  • JavaScript 评估问题

    var x 5 function f y return x y 2 function g h var x 7 return h x var x 10 z g f 我正在解决课堂上教科书上的一些问题 为下一次考试做准备 但无法弄清楚上述内容如
  • Pandas 对条形图进行分组和重采样:

    我有一个数据框 以高时间频率 为了计算平均浓度 我必须对每日和每月数据应用质量控制过滤器 我的方法是首先应用过滤器并每年重新采样 然后按位置和年份进行分组 另外 在所有位置 在标题为 位置 的列中 中 我只需选择几行 因此 我对原始数据框进
  • SMIL(同步多媒体集成语言)的未来?

    SMIL 同步多媒体集成语言 最后一次更新是在2008年 有谁知道在同步多媒体文件时是否有更好的协议可以遵循 SMIL 没有天然的竞争对手 因此任何其他解决方案都将依赖于脚本 它支持 ePub 阅读器 例如Azardi http azard
  • 为什么删除不是 Subversion 的基本功能?

    几年来 我一直在等待 Subversion 提供 永久删除 消除 功能 我犹豫是否要过渡到 Subversion 来自 Visual SourceSafe p 因为我认为这是一个基本功能 否则我会期望存储库会不可阻挡地增长 然而 由于某种原
  • 阻塞读和非阻塞读有什么区别?

    在上述问题中添加等待 不等待指示器的概念作为 TCP IP 或 UDP 环境中 ReadMessage 函数的参数 第三方功能描述指出 此函数用于从先前的 registerforinput 调用定义的队列中读取消息 输入等待 不等待指示器将
  • Pandas - 计算相对于最早值的每日差异

    这可能很容易 但由于某种原因 我发现它很难完成 任何提示将非常感谢 我有一些每天 5 分钟间隔的时间序列数据 唉 Date Values 2012 12 05 09 30 00 5 2012 12 05 09 35 00 7 2012 12
  • 在同一行文本上对齐不同的字体大小以便看起来不错?

    基本上 我希望在同一行上有一个 h1 和一个 p 元素 但是对齐方式偏离了很多 意味着 H1 高于 P 并且看起来很糟糕 并且我之前从未使用 css 做过这样的事情 我已经整理了一个 jsfiddle 来配合它 这里是代码 h1 style
  • ASP.NET MVC3 Razor - 如何有条件地退出或结束或返回或中断部分视图?

    使用 Razor 如何有条件地退出或结束或返回或中断部分视图 if Model null return 不 你不return在视图中 您只需不在主视图中包含此类部分即可 if Model null Html Partial somePart
  • Python CFFI 的内存管理和析构函数/free() 约定?

    如果我包装一个 C 类 from ffi import ffi lib class MyClass object def init self self c class lib MyClass create 确保的最佳实践是什么lib MyC
  • 我可以获得 HTMLElement DOM 对象的完整 HTML 表示形式吗?

    我正在使用 jquery 来解析一些 HTML 例如 html contents each function var element this tagName 我可以使用 DOM 或更友好的 jQuery 函数访问 tagName 子项 父
  • 迭代数组的每个元素(第一个元素除外)

    编写此代码的惯用 Ruby 方式是什么 给定一个数组 我想迭代该数组的每个元素 但跳过第一个元素 我想在不分配新数组的情况下执行此操作 这是我想出的两种方法 但都不是特别优雅 这可行 但似乎太冗长了 arr each with index
  • SQL Server 连接后行数低估

    当实际行数为 2000 时 查询优化器估计联接结果只有一行 这导致数据集上的后续联接的估计结果只有一行 而其中一些联接的结果却高达 2000 30 000 计数为 1 时 QO 正在为许多连接选择循环连接 索引查找策略 这太慢了 我通过限制
  • 配置Webpack将LESS文件的目录构建成相应的CSS文件

    我希望使用 Webpack 编译我们所有的 less 文件 less to public css并将它们作为常规 css 包含在我们的服务器端模板中 not将文本粘贴到使用 ExtractText 插件或重载 require 中 也就是说