问题标签 [extracttextwebpackplugin]

我正在使用"webpack": "^3.1.0"和 "extract-text-webpack-plugin": "^1.0.1"

尝试编译 sass，我收到以下错误：Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

我已经根据提供的文档使用了它 - 不明白为什么我会收到 webpack 构建错误。

这是我的 webpack 文件：

按照 Material UI 的入门指南，我在我的存储库中安装了 typeface-roboto，如下所示：

Index.js 是我的 React 应用程序的入口点：

根据该网站，这应该可以解决问题。然而，在运行时，webpack 向我抛出了这个错误：

webpack.config.js 的模块部分：

我发现了许多相关的问题，人们或多或少地向它抛出了随机的“解决方案”，但实际上并没有解决任何问题或解释这里发生的事情。

使用的版本：

• 网络包 3.7.1
• 提取文本 webpack 插件 3.0.1
• 字体机器人 0.0.41
• 节点 8.6.0

我有这个设置在一个较旧的项目上工作，使用：

我现在正在尝试一个新项目，因此已升级到：

Webpack 配置完全相同，但现在我遇到了错误。

我正在使用 node-bourbon，我想让它在我的所有条目中都可用，而不必每次都导入它。

我有一个 SCSS 文件：stylesheets/tools/mixins/bourbon.scss （应该）简单地导入波旁威士忌： @import 'bourbon';

然后我使用 sass-resources-loader 使其（以及其他一些 mixins）在所有模块中都可用（参见下面的配置）。

网络包配置： { test: /\.scss$/, use: ExtractTextPlugin.extract({ use: [ ... { loader: "sass-loader", options: { sourceMap: true, includePaths: require('bourbon').includePaths } }, { loader: 'sass-resources-loader', options: { resources: [ './frontend/stylesheets/settings/*.scss', './frontend/stylesheets/tools/**/*.scss' ] }, }, ] }) },

但是 SCSS 文件中的 import 语句没有解析为 node_modules，它试图引用自己，所以我得到这个错误： Module build failed: @import 'bourbon'; ^ An @import loop has been found:

似乎 node-bourbon 的 includePaths 被忽略了？

更新：

我现在通过直接引用波旁威士忌设法解决了这个问题： @import '~bourbon/app/assets/stylesheets/_bourbon';

不理想，但它可以完成工作。

有趣的是，当我@import 'bourbon';在 sass-resources-loader 中未声明的文件中包含波旁威士忌时，它可以工作。也许 ExtractTextPlugin 不会将 sass-loader 中的 includePaths 传递给 sass-resource-loader 中引用的模块。

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

对于 CSS：

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

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

这是我的配置：

3个入口点：

插件 - 每个入口点都有 HtmlWebpackPlugin（仅显示一个）：

常见的块：

完整配置：

任何帮助表示赞赏！

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

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

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

输出类似：

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

在特定条目/页面的上下文中，如何提取特定的 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 使用它的方式上。我已经研究这个问题几个小时了。很想听听是否有人有任何有用的提示。

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

构建时，我收到以下错误：

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

我的项目环境是

我将样式提取到单个 css 文件中，它在 chrome firefox 和 IE10+ 中运行良好，但在 IE9- 中运行良好。

我发现旧的 IE 对 css 文件有限制：

但我提取的 css 文件有 4095+ 个选择器。

那么，有没有办法通过限制函数自动分割提取的 css 文件？喜欢 ：

我已经阅读了大量的教程并查看了比我想记住的更多的 Github 存储库，但我真的很难设置 Webpack 3 来执行以下操作：

• 将 SASS 编译成 CSS
• 在 dist 目录中创建 CSS 文件
• 在 CSS 上运行 Autoprefixer

下面是我的 webpack.config.js：

眼下：

• webpack 开发服务器正在运行。
• 样式从 src/scss/styles.scss 复制到 src/index.html 提供的 HTML 文件中的内联样式块。

我希望创建一个 dist 目录，其中包含一个 styles.css 文件，然后我可以从我的 HTML 中链接到该文件。

谢谢

我有创建 bundle.js 的 webpack.config.js 但由于某种原因它没有创建任何 css 文件，尽管我有css-loader,style-loader和extract-text-webpack-plugin.

我的 webpack.config.js

我希望我在其他地方创建这个捆绑的 css 文件我在我的文件夹中看不到任何 css 文件。

如果有人能发现我做错了什么，请告诉我。

谢谢，