问题标签 [extract-text-plugin]

我正在尝试将项目与 Webpack 捆绑在一起，但我收到一个错误：“找不到模块 './stylesheet/css/build.css'”我正在使用 webpack 1.14.0 和 yarn 0.17.10。 webpack 打印屏幕

请给我一些建议，我应该如何使用 require() 来获得结果。

感谢您的帮助！

webpack.dev.js

main.ts

附加信息 - 项目结构

我目前正在尝试将 CSS 样式恢复为React Boilerplate，并且能够让 css 样式在开发环境中成功加载。当我尝试捆绑项目进行部署时，webpack 和 ExtractTextPlugin 没有创建 css 文件。

版本：

有人可以看看我下面的 webpack 文件，看看没有创建 css 文件的可能原因是什么？

相关的 webpack.prod.babel.js：

相关的 webpack.base.babel.js：

我正在尝试将我的 webpack 1.x 迁移到 2.x，但它不适用于 ExtractTextPlugin。

我的 webpack 版本是 2.1.0-beta.28 和 "extract-text-webpack-plugin": "2.0.0-beta.4"

这是我的 webpack.config.js 在没有 ExtractTextPlugin 的情况下工作：

所以当我运行 webpack 时，我得到了这个错误：无效的配置对象。Webpack 已使用与 API 模式不匹配的配置对象进行初始化。- configuration.resolve 具有未知属性“modulesDirectories”。这些属性是有效的：object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks ?，不安全缓存？} - configuration.resolve.extensions[0] 不应为空。

我有一个非常简单的设置，它使用 Webpack (1.14.0) 和 Extract Text Webpack Plugin (1.0.1) 来生成 CSS 文件。问题是在运行 webpack 时，没有生成 CSS 工件。

这是我的webpack.config.js：

如您所见，这是一个非常简单的设置。我有一个名为的文件夹src，其中包含一个名为index.js（当前为空白）和style.css（仅包含一个正文样式）的文件。期望是相关dist文件夹包含一个名为的工件style.css（基本上应该只是原件的副本）。实际结果是，只有dist/bundle.js曾经生产过。据我所知，Webpack 和 Extract Text Webpack Plugin 的版本应该兼容（peerDependencyExtract Text Webpack Plugin 的版本是^1.9.11）。

我在这里想念什么？

我对前端相当陌生，我一直在尝试学习 webpack。我在使用 Extract-Text-Webpack-Plugin 时遇到了一些我似乎无法弄清楚的问题。我将不胜感激有关此主题的任何帮助。此外，欢迎任何建议/提示！

警告/错误

./~/chokidar/lib/fsevents-handler.js 中的警告模块未找到：错误：无法解析 C:\Git\JNJ.Web\src\JNJ.Web.UI\client\node_modules\chokidar 中的模块“fsevents” \lib@./~/chokidar/lib/fsevents-handler.js 7:17-36

(webpack)/~/constants-browserify/constants.json 中的错误模块解析失败：C:\Users\christian\AppData\Roaming\npm\node_modules\webpack\node_modules\constants-browserify\constants.json 意外令牌（2： 12) 你可能需要一个合适的加载器来处理这个文件类型。SyntaxError: Unexpected token (2:12) at Parser.pp$4.raise (C:\Users\christian\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15) 在 Parser .pp.unexpected (C:\Users\christian\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10) 在 Parser.pp.semicolon (C:\Users\christian\ AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:581:61) 在 Parser.pp$1.parseExpressionStatement (C:\Users\christian\AppData\Roaming\npm\node_modules\webpack\node_modules \acorn\dist\acorn.js:966:

包.json

webpack.config.js

我正在尝试将使用 WebPack 2.1.0 beta 8 的 AngularJS (Angular 1) 应用程序升级到 WebPack 2.2.0 RC3，但我遇到了 ExtractTextPlugin 的问题。

我从以下工作开始：

我的 package.json 中为此使用的版本是：

• “css-loader”：“^0.23.1”
• "less-loader": "^2.2.2"
• “postcss-loader”：“^0.9.1”
• “样式加载器”：“^0.13.0”，
• “提取文本 webpack 插件”：“^1.0.1”
• “webpack”：“2.1.0-beta.8”

我的 webpack 配置有一些其他的加载器和插件，但我目前只面临 ExtractTextPlugin 的问题。升级我的设置后，我最终得到了以下代码：

此配置使用以下版本：

• “css-loader”：“^0.26.1”
• "less-loader": "^2.2.3"
• “postcss-loader”：“^1.2.1”
• “样式加载器”：“^0.13.1”
• “extract-text-webpack-plugin”：“2.0.0-beta.4”
• “webpack”：“2.2.0-rc.3”

上述配置导致以下异常：

./src/index.less 中的错误模块解析失败：D:...\node_modules\extract-text-webpack-plugin\loader.js?{"omit":0,"remove":true}!style-loader !css-loader!postcss-loader!less-loader!D:...\src\index.less 意外字符 '@' (3:0) 您可能需要适当的加载程序来处理此文件类型。| /* 1. 导入供应商样式/ | | @import './index.vendor.less'; | | / 2. 导入通用样式 */ @ ./src/index.ts 24:0-23 @multi app

./~/animate.css/animate.css 中的错误 模块解析失败：D:...\node_modules\animate.css\animate.css 意外字符 '@' (1:0) 您可能需要适当的加载程序来处理这种文件类型。| @charset "UTF-8"; | | /*！

./~/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css 中的错误 模块解析失败：D:...\node_modules\bootstrap-material-datetimepicker\css\bootstrap-material-datetimepicker.css 意外令牌(1:0) 您可能需要适当的加载程序来处理此文件类型。| .dtp { 位置：固定；顶部：0；左：0；右：0；底部：0；背景：rgba(0, 0, 0, 0.4); z 指数：2000；字体大小：15px；-webkit 用户选择：无；-moz 用户选择：无；-ms 用户选择：无；用户选择：无；} | .dtp > .dtp-content { 背景：#fff; 最大宽度：300px；盒子阴影：0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 最大高度：520px；位置：相对；左：50%；} | .dtp > .dtp-content > .dtp-date-view > header.dtp-header { 背景：#689F38; 颜色：#fff; 文本对齐：中央; 填充：0.3em；}

除了上面的加载器配置，我还尝试了下面的配置，但都没有成功：

我已经删除了我的 node_modules 文件夹并从头开始安装了所有东西，但这并没有帮助。

注意：删除 ExractTextPlugin 配置并将其替换为以下内容确实可以让我成功构建应用程序，所以我想说我的 webpack 配置的其余部分已成功迁移！

我上传了一个示例来重现该问题：https ://dl.dropboxusercontent.com/u/87239305/webpack-less.zip

重现步骤：

• npm 安装
• node_modules\ .bin\webpack.cmd --config conf\webpack.conf.js

我还添加了第二个正在运行的配置文件，没有 ExtractTextPlugin：

• node_modules\ .bin\webpack.cmd --config conf\webpack.conf2.js

感谢我在这里缺少的任何指导！

提前致谢。

如何使用 bootstap 4 显示正确的 webpack 2 rc3 配置？

这是我的.bootstraprc

这是我的webpack.config.js

毕竟我在 npm start 上得到这个错误：

./~/extract-text-webpack-plugin/loader.js 出错？{"omit":1,"remove":true}!./~/style-loader!./~/resolve-url-loader! ./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"extractStyles":true,"styleLoaders":["style-loader ","css-loader","postcss-loader","sass-loader"],"styles":["mixins","normalize","print","re​​boot","type","images", "code","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav", "导航栏","卡片","面包屑","分页","jumbotron","alert","progress","media","list-group","re​​sponsive-embed","close","badge","modal","tooltip","popover","carousel" ,"实用程序"],"脚本":false,"configFilePath":"/Users/ivan/Dev/react/.bootstraprc","bootstrapPath":"/Users/ivan/Dev/react/~/bootstrap"," bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 模块构建失败：ModuleBuildError：模块构建失败：TypeError：无法读取未定义@ ./~/bootstrap 的属性“路径” -loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js 1:21-1040 @ ./~/bootstrap-loader/extractStyles.js @ 多应用“媒体”、“列表组”、“响应式嵌入”、“关闭”、“徽章”、“模态”、“工具提示”、“弹出框”、“轮播”、“实用程序”]、“脚本”：false ,"configFilePath":"/Users/ivan/Dev/react/.bootstraprc","bootstrapPath":"/Users/ivan/Dev/react/~/bootstrap","bootstrapRelPath":"../bootstrap"}! ./~/bootstrap-loader/no-op.js 模块构建失败：ModuleBuildError：模块构建失败：TypeError：无法读取未定义@ ./~/bootstrap-loader/lib/bootstrap.loader.js 的属性“路径”？ extractStyles!./~/bootstrap-loader/no-op.js 1:21-1040 @ ./~/bootstrap-loader/extractStyles.js @ multi app“媒体”、“列表组”、“响应式嵌入”、“关闭”、“徽章”、“模态”、“工具提示”、“弹出框”、“轮播”、“实用程序”]、“脚本”：false ,"configFilePath":"/Users/ivan/Dev/react/.bootstraprc","bootstrapPath":"/Users/ivan/Dev/react/~/bootstrap","bootstrapRelPath":"../bootstrap"}! ./~/bootstrap-loader/no-op.js 模块构建失败：ModuleBuildError：模块构建失败：TypeError：无法读取未定义@ ./~/bootstrap-loader/lib/bootstrap.loader.js 的属性“路径”？ extractStyles!./~/bootstrap-loader/no-op.js 1:21-1040 @ ./~/bootstrap-loader/extractStyles.js @ multi appmodal","tooltip","popover","carousel","utilities"],"scripts":false,"configFilePath":"/Users/ivan/Dev/react/.bootstraprc","bootstrapPath":"/ Users/ivan/Dev/react/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 模块构建失败：ModuleBuildError：模块构建失败：TypeError：无法读取未定义的属性“路径”@ ./~/bootstrap-loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js 1:21-1040 @ ./~/ bootstrap-loader/extractStyles.js @多应用modal","tooltip","popover","carousel","utilities"],"scripts":false,"configFilePath":"/Users/ivan/Dev/react/.bootstraprc","bootstrapPath":"/ Users/ivan/Dev/react/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 模块构建失败：ModuleBuildError：模块构建失败：TypeError：无法读取未定义的属性“路径”@ ./~/bootstrap-loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js 1:21-1040 @ ./~/ bootstrap-loader/extractStyles.js @多应用:"/Users/ivan/Dev/react/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 模块构建失败：ModuleBuildError：模块构建失败: TypeError: Cannot read property 'path' of undefined @ ./~/bootstrap-loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js 1:21-1040 @ . //bootstrap-loader/extractStyles.js @多应用:"/Users/ivan/Dev/react/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 模块构建失败：ModuleBuildError：模块构建失败: TypeError: Cannot read property 'path' of undefined @ ./~/bootstrap-loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js 1:21-1040 @ . //bootstrap-loader/extractStyles.js @多应用

"badge","modal","tooltip","popover","carousel","utilities"],"scripts":false,"configFilePath":"/Users/ivan/Dev/react/.bootstraprc"," bootstrapPath":"/Users/ivan/Dev/react/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 模块构建失败：ModuleBuildError：模块构建失败：TypeError：无法读取对象未定义的属性“路径”。(/Users/ivan/Dev/react/node_modules/async/dist/async.js:2234:31) "badge","modal","tooltip","popover","carousel","utilities"],"scripts":false,"configFilePath":"/Users/ivan/Dev/react/.bootstraprc"," bootstrapPath":"/Users/ivan/Dev/react/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 模块构建失败：ModuleBuildError：模块构建失败：TypeError：无法读取对象未定义的属性“路径”。(/Users/ivan/Dev/react/node_modules/async/dist/async.js:2234:31)

我正在使用webpack@2.2.0-rc.3并且extract-text-webpack-plugin@2.0.0-beta.4我有以下 webpack 配置：

在vendor.js文件中，我有以下代码：

在asdf.css我的代码中

这是一个非常简单的设置，但是在运行 webpack 时出现此错误：

我究竟做错了什么？

我的 Webpack 配置包含以下加载器。

然后，我希望将 CSS 提取到一个单独的文件中，并尝试使用提取文本 webpack 插件，像这样交替我的配置。

但是，它失败了。可能是因为我没有正确指定装载机。如何指定多个加载器（一个用于 SASS，一个用于 CSS）？

未找到模块：错误：无法解析 C:\Source\Poc\TestProj
@ ./index.js 中的模块“[object Object]” 7:14-38

我检查了文件index.js但我看不出有什么问题。它实际上是空导出，如下所示。对 7:14-38 的引用对我没有任何意义。文件中没有那么多行，甚至......

我已将 webpack 配置为使用 ExtractTextPlugin 从 sass 生成单个 css 文件，并允许它通过 webpack 加载器导入在 reactjs 应用程序中可用。

sass 文件的使用是通过 react 组件中的 import 语句检测到的，并且正在生成一个输出文件，但是生成的 main.css 文件是空的，并且导入返回一个空样式对象，有人知道我是什么吗做错了吗？

结构

Webpack 配置

导航栏.scss

导航栏.js

症状

装载机和进口（不再是问题，请参阅下面的答案）

1. console.log(styles) = 对象 {}

2. 样式.navbar = 未定义

插件

1. public/styles/main.css 为空（不再是问题，请参阅下面的答案）

问题

1. 为什么在 Narbar.js 中导入样式时它是一个空对象？我配置错了什么？（我已经找到了解决方案，并在下面的答案部分提供了答案）
2. 为什么 public/style/main.css 是空的？（我已经找到了解决方案，并在下面的答案部分提供了答案）