問題タブ [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 スタイルを正常に読み込むことができました。デプロイ用にプロジェクトをバンドルしようとすると、css ファイルが webpack と ExtractTextPlugin によって作成されません。

バージョン:

以下の私の webpack ファイルを見て、css ファイルが作成されない理由を確認してください。

関連する webpack.prod.babel.js:

関連する webpack.base.babel.js:

私はフロントエンドにかなり慣れていないので、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) at Parser 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) \どんぐり\dist\どんぐり.js:966:

パッケージ.json

webpack.config.js

WebPack 2.1.0 ベータ 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"
• "style-loader": "^0.13.0",
• "extract-text-webpack-plugin": "^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"
• "style-loader": "^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-user-select: なし; -moz-user-select: なし; -ms-user-select: なし; ユーザー選択: なし; } | .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 なしで機能する 2 つ目の構成ファイルも追加しました。

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

ここで私が見逃していることについてのガイダンスをいただければ幸いです。

前もって感謝します。

ブートストラップ 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", "navbar","card","breadcrumb","pagination","jumbotron"、"alert"、"progress"、"media"、"list-group"、"responsive-embed"、"close"、"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: 未定義のプロパティ 'path' を読み取れません @ ./~/bootstrap -loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js 1:21-1040 @ ./~/bootstrap-loader/extractStyles.js @ マルチアプリ"media","list-group","re​​sponsive-embed","close","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: 未定義のプロパティ「パス」を読み取れません @ ./~/bootstrap-loader/lib/bootstrap.loader.js? extractStyles!./~/bootstrap-loader/no-op.js 1:21-1040 @ ./~/bootstrap-loader/extractStyles.js @ マルチアプリ"media","list-group","re​​sponsive-embed","close","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: 未定義のプロパティ「パス」を読み取れません @ ./~/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 @ マルチアプリ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: 未定義のプロパティ「パス」を読み取れません @ ./~/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: 未定義のプロパティ「パス」を読み取れません @ ./~/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: オブジェクトで未定義のプロパティ 'path' を読み取れません。(/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: オブジェクトで未定義のプロパティ 'path' を読み取れません。(/Users/ivan/Dev/react/node_modules/async/dist/async.js:2234:31)

ExtractTextPlugin を使用して sass から単一の css ファイルを生成し、webpack ローダーを介したインポートを介して reactjs アプリ内で使用できるように webpack を構成しました。

sass ファイルの使用は、react コンポーネントの import ステートメントによって検出され、出力ファイルが生成されますが、生成される main.css ファイルは空であり、インポートは空のスタイル オブジェクトを返します。間違っている？

構造

Webpack 構成

navbar.scss

Navbar.js

症状

ローダーとインポート(もはや問題ではありません。以下の回答を参照してください)

1. console.log(styles) = オブジェクト {}

2. styles.navbar = 未定義

プラグイン

1. public/styles/main.css が空です(もはや問題ではありません。以下の回答を参照してください)

質問

1. Narbar.js にスタイルをインポートするときに、スタイルが空のオブジェクトになるのはなぜですか? 何を間違って設定しましたか? （私は解決策を見つけ、回答セクションで以下の回答を提供しました）
2. public/style/main.css が空なのはなぜですか? （私は解決策を見つけ、回答セクションで以下の回答を提供しました）