问题标签 [extract-text-plugin]

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.

0 投票
1 回答
622 浏览

javascript - ExtractTextPlugin 不适用于 Angular AOT 构建

因此,我正在尝试使用 AOT 构建创建 Angular ( 4.4.4) Webpack ( 3.6.0) 启动器,并且遇到了将 css 提取到单独的包中的问题(使用 extract-text-webpack-plugin 3.0.1)。

当我运行我的产品构建时,webpack 构建卡在95% emitting. 它永远不会达到 100%,也永远不会输出 dist 包。起初我尝试使用style-loader( 0.19.0) 创建内联 CSS,但这并不成功,因为 Angular AOT 构建在构建期间没有窗口对象(此时 sass-loader 将失败)。因此,我被迫在生产过程中将 css 提取到一个单独的包中(这根本不是一件坏事)。

但不知何故,编译器会停止并且永远不会出错。

webpack.common.js

Webpack.prod.js


对于 prod 构建,我正在运行以下 npm 任务:"build --prod": "webpack -p --config webpack.prod.js --progress"

我的package.json 依赖项如下所示:

我的Angular 组件如下:

我的项目结构是:

任何人都知道我做错了什么?

0 投票
2 回答
1894 浏览

webpack - 使用 Webpack 和 PostCSS 启用热重载

当我在我的文本编辑器中保存样式表时,我希望热重新加载我的窗口。目前,我必须手动重新加载页面以查看任何更改。下面是我的 Webpack 配置文件中处理 css 的片段:

我正在使用 Webpack 3、Webpack Dev Server 和 PostCSS 以及提取文本插件。谢谢!

0 投票
1 回答
805 浏览

webpack - Webpack bootstrap ExtractTextPlugin SCSS - 模块解析失败意外字符'@'

我正在尝试使用 webpack 从 bootstrap 4.0.0 beta scss 输出一个 css 文件。我已经成功地按照以下方式使用内联样式注入处理了 scss:https ://getbootstrap.com/docs/4.0/getting-started/webpack/ 。存在与将样式注入文档头部相关的问题。

这是我的 package.json:

和我的 webpack.config.js(更新):

我已经尝试了对 webpack 配置的各种修改,因为很多人都有相同或相关问题的帖子。到目前为止,我显然没有成功。

**EDIT !important :整个问题是应该引用排除属性,因为在这种情况下它们不是正则表达式而是字符串。感谢芽头!

0 投票
0 回答
277 浏览

webpack - 控制台中的子提取文本 webpack 插件记录太多次

我对这个(标题)向我的控制台发送垃圾邮件有疑问。我被邀请参加一个我没有编写的项目,这是开发人员想要解决的问题之一。

我已经添加

在 allChunks 所在的地方,它们都不工作。

0 投票
1 回答
1174 浏览

webpack-2 - 未使用 extract-text-webpack-plugin 为公共块提取 CSS

不确定这是错误还是我的设置,我正在使用 CommonsChunkPlugin 为我的项目中的三个入口点获取单独的 common.js,并使用 extract-text-webpack-plugin 获取 css 文件。我的入口点是应用程序、登录和注册。我能够得到:

对于 CSS:

我似乎无法生成 common.css。所有的 css 都被塞进一个 app.css 文件中。

我的项目是基于 vuetify webpack 模板设置的: https ://github.com/vuetifyjs/webpack-advanced

这是我的配置:

3个入口点:

插件 - 每个入口点都有 HtmlWebpackPlugin(仅显示一个):

常见的块:

完整配置:

任何帮助表示赞赏!

0 投票
1 回答
41 浏览

css - Webpack 不会将 CSS 与 ExtractTextPlugin 捆绑在一起

我知道有人会将其标记为重复,但整个网络上似乎没有什么是我需要的。

webpack 配置和目录结构截图

这几乎是此处找到的示例的直接复制/粘贴。这是在仔细遵循此处找到的教程之后。

当我从命令行运行webpack时,我得到了./bundle/app.js输出,但在任何地方都没有与 CSS 相关的内容。

据我所知,它根本不会捆绑 CSSLaniakea的问题可能是什么???

深表感谢

0 投票
3 回答
4379 浏览

javascript - 类名没有出现 React

不确定我哪里出错了。这是我用于捆绑客户端的 webpack.prod。但是有些classNames没有出现在我的html中

这是 header.js 文件,我从 header.scss 文件中导入了样式。

header.scss 文件包含以下代码:

这是我的控制台的屏幕截图,其中没有出现类。 在此处输入图像描述

我在 package.json 中包含了以下依赖项

在服务器端我有这样的代码;

0 投票
1 回答
1442 浏览

webpack - 如何从每个条目中提取关键(首屏)CSS?

我有一个简单的三页多页应用程序,我webpack.config.js entry看起来像:

每个页面由几个 React 组件组成,其中一些在第一次渲染时在首屏可见,而另一些则不在视野范围内。

我想以声明方式定义每个页面/条目的“关键”(首屏)组件,并将该 CSS 提取到单独的文件中。就像是:

输出类似:

我一直在玩extract-text-webpack-plugin,但似乎找不到一种方法来告诉它只在特定条目的上下文中提取特定的 CSS。


在特定条目/页面的上下文中,如何提取特定的 CSS 文件内容?

0 投票
1 回答
387 浏览

webpack - ExtractTextPlugin:如何避免重命名 CSS 关键帧?

如果在一个文件中定义了两个动画,则该文件将包含在另外两个文件中,动画将获得相同的单个字母名称 a ,这会破坏其中一个优先级较低的动画(因为后者会覆盖前者)

来源:Github 上的 css-loader 问题

ExtractTextPlugin使用with时,我看到了相同的效果css-loader。来自不同 .scss 文件的几个不同关键帧都重命名为a. 如问题中所述,我已尝试禁用最小化选项discardUnused和。我什至试图完全禁用最小化,但这没有帮助。mergeIdents

这是我的配置:

  • 网络包 2.7.0
  • CSS加载器:0.28.7
  • 提取文本 webpack 插件:2.1.0

我不确定问题出在 css-loader 还是 ExtractTextPlugin 使用它的方式上。我已经研究这个问题几个小时了。很想听听是否有人有任何有用的提示。

0 投票
1 回答
1453 浏览

webpack - 使用 ExtractTextPlugin 和 sass-loader 时无法设置 includePaths

我正在使用最新版本的 webpack 和 extract-text-webpack-plugin。我正在尝试按照Export Sass 或 LESS的说明进行操作。我整天都在阅读有关此问题的问题和答案,但仍然没有找到任何有效的方法。我不明白我错过了什么。是否无法传递includePaths为 sass-loader 设置的选项?这是我目前在 webpack.config.js 中的尝试:

构建时,我收到以下错误:

在这一点上,我已经尝试并准备好了 10 种不同的方式,但我无法让它工作。我很困惑这是否是某种错误,或者我做错了什么。任何人都可以帮忙吗?我只想为 sass-loader 设置 includePaths。