问题标签 [webpack-style-loader]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
intellij-idea - Webpack 有时无法检测到使用 Intellij Idea 保存的更改
我正在 Intellij Idea 中开发一个 JavaScript/React 应用程序，并webpack-dev-server用于增量构建我的文件。这意味着开发服务器正在监视文件，如果文件发生更改，webpack则重新构建它。很标准的场景。
不幸的是，webpack有时会决定忽略某些文件。我可以随心所欲地改变它们，但webpack什么也不做。我无法确定文件被忽略的任何模式。这是任意的。有时我只是创建一个新文件并webpack忽略它。
有趣的是，它仅在我使用 Intellij Idea 执行保存时发生。如果我在另一个编辑器（例如 vim）中打开文件并保存它，文件会正确重建。实际上，简单touch file.js就足以触发重建。
我猜 Intellij Idea 保存文件的方式有问题。有任何想法吗？
angular - Angular2/Webpack：如何加载在 css 文件中导入的字体？
我正在使用 Angular2 beta.15 和 webpack 1.12.14。
我有一个 .css 和一个 .scss 文件app.component.ts作为这样的全局模式。
而且，在.css文件内部，一些字体被导入如下，
在webpack.config.js中，我有、 和字体的加载器.css，如下所示.scss
当我运行webpack -display-error-details时，根本没有错误，但是当我启动服务器运行我的应用程序时，出现如下错误
如果我将 css 加载器更改为
这些异常消失了，应用程序启动了，但是我在浏览器的控制台中收到了这些字体的一些 404 请求错误，它们根本没有加载。那么，你能给我一些指点吗？我怀疑我的加载程序设置有问题。
webpack - 具有多个入口点的 Webpack url 加载器上下文错误
我正在尝试将资产加载到我的 css 中，在某些情况下（更大的文件），复制到特定目录。使用 url 加载器并为名称模板定义查询参数时，出现错误：
错误：路径变量 [name] 未在此上下文中实现：[path][name].[ext]?7770f0c15c5bc5d8291a
我正在使用具有定义输出的多个入口点，我不确定这是否是问题所在。有没有办法强制上下文？Webpack 配置如下。
这是我的文件结构：
webpack - 为什么我无法使用 Webpack 编译 SASS？
我的 Webpack 配置中有以下模块：
您可以看到我正在使用 sass-loader，并且对于 *.scss 文件，我正在定义这个管道：['style', 'css', 'sass'].
然后我有我的 scss 文件：
最后，我的 HTML 页面（在 vue.js 的 VUE 文件中）导入了该 scss 文件：
但不知何故，我在启动项目时遇到了这个错误：
为什么管道会出错？（看起来 webpack 正在尝试处理['css', 'sass', 'style', 'css', 'sass']而不是['style', 'css', 'sass']像在模块中配置的那样。
我究竟做错了什么？
谢谢！
编辑：链接到完整的示例项目：https ://dl.dropboxusercontent.com/u/1066659/dummy.zip
css - 使用 Webpack 将样式表拆分为多个文件
我们使用 Webpack 作为我们的构建系统，并且一直在尝试将我们的单个大型样式表拆分为多个块。
目前我们通过创建单独的入口点来做到这一点，但这给我们带来了一个问题；我们必须重复许多进口。这导致了一个碎片化的、意大利面条式的依赖图，并丢失了可能需要的任何共享上下文。
理想情况下，最好坚持使用单个入口点，编译单个大型样式表，然后将其拆分。
例如，给定这个单一入口点 main.scss：
它编译了 2 个样式表；critical.css 和 main.css
css - 用于在 Webpack 中启用热样式加载器以同步 css 的配置
我正在尝试在 Webpack 中启用热样式加载器，但我找不到合适的配置。这是我的 webpack.config.js：
还有我的 package.js 文件：
但无论我如何配置它，我都无法让热同步工作（对于 .css，对于 .js 文件，它工作得很好）！有人可以告诉我正确的方法吗？
css - 我必须使用什么 webpack 加载器来组合媒体查询？
为了组合媒体查询，我必须使用什么 webpack 加载器，或者现在没有这样的加载器？在我的项目中，我使用 style-loader、css-loader、postcss-loader 和 sass-loader 来构建样式表。但是，它们都没有结合媒体查询。我只需要一个 webpack 加载器，就像 grunt/gulp-combine-media-queries 一样。
提前致谢。
webpack - 在禁用 javascript 时使用 loader 进行 css - webpack
在我的 webpack 配置中使用 style-loader 和 css-loader，下面是我的 webpack.config.js 的摘录
当 JS 被禁用时，我可以看到样式没有写入<head>文档，因此页面呈现为纯文本。
四处挖掘我听说了extract-text-webpack-plugin，稍微更改配置就能够将 *.css 文件捆绑到一个文件中app.css并有效地加载它。
问题 ：
- 当 JS 被禁用时，我是否可以假设 style-loader 或 css-loader 无法将样式块写入 head？
- 对于这种情况，使用 extract-text-webpack-plugin 是一个有效的解决方案吗？
- 在这种情况下还有其他方法可以加载 CSS 吗？
PS：刚刚从 webpack 开始，所以如果 webpack.config.js 中有任何明显的问题，请指出。
css - 使用 webpack 分离字体和 css
我想要实现的是将 .less 提取到带有字体的 .css 文件中，并将每个文件放在单独的目录中，如下所示：
但是重点是css文件中的字体目录是同级的。
样式.css
webpack.config.js
库/parts.js
任何帮助将不胜感激。
javascript - Webpack没有构建css文件
因此，我按照http://webpack.github.io/docs/tutorials/getting-started/上的教程进行操作，但我被困在 css 样式加载器步骤上。这是我的 entry.js：
这是 content.js：
这是 style.css：
在此之后，我正在运行以下命令：
webpack ./entry.js bundle.js
我收到此错误：
版本：webpack 1.13.0 时间：866ms 资产大小块块名称 bundle.js 10.1 kB 0 [emitted] main [0] ./entry.js 115 bytes {0} [built] [4] ./content.js 45 bytes {0} [内置] + 3 个隐藏模块
./~/css-loader!./style.css 中的错误模块构建失败：ReferenceError：Promise 未在 LazyResult.async 中定义（/var/www/html/webpack/node_modules/css-loader/node_modules/postcss/lib /lazy-result.js:157:31) 在 LazyResult.then (/var/www/html/webpack/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:79:21) 在 processCss ( /var/www/html/webpack/node_modules/css-loader/lib/processCss.js:198:5) 在 Object.module.exports (/var/www/html/webpack/node_modules/css-loader/lib/loader .js:24:2) @ ./~/style-loader!./~/css-loader!./style.css 4:14-73
如何解决这个问题？