4

会社用のパターン ライブラリを作成しようとしています。次のソフトウェアを使用しています。

  • css-loader@0.23.1
  • extract-text-webpack-plugin@1.0.1
  • node-sass@3.8.0
  • sass-loader@4.0.0
  • style-loader@0.13.1
  • webpack@1.13.2
  • resolve-url-loader@1.6.0
  • node@6.3.1
  • npm@3.10.3

私のコンピューター（Windows 10）で。

私の目標は、@import "colors"ステートメントを使用して、対応するファイルを取得することです../patterns/globals/_colors.css。includePathssass-loader と resolve-url-loader を property で設定してみましたroot。しかし、どちらも今のところ機能していません...

sass-loader と includePaths を使用した最初の実行で、次のエラー レポートが表示されました。

Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.2
Time: 522ms
    + 1 hidden modules

ERROR in ./styles.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~/projects/webpack-sass-fail/app
    at ~/projects/webpack-sass-fail/app/node_modules/webpack/lib/Compilation.js:229:38
    at onDoneResolving (~/projects/webpack-sass-fail/app/node_modules/webpack/lib/NormalModuleFactory.js:29:20)
    at ~/projects/webpack-sass-fail/app/node_modules/webpack/lib/NormalModuleFactory.js:85:20
    at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:726:13
    at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:52:16
    at done (~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:241:17)
    at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:44:16
    at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:723:17
    at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:167:37
    at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:24:19
    at onResolved (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:38:18)
    at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:127:10
    at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:191:15
    at applyPluginsParallelBailResult.createInnerCallback.log (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:110:4)
    at loggingCallbackWrapper (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
    at ~/projects/webpack-sass-fail/app/node_modules/tapable/lib/Tapable.js:134:6
    at Tapable.<anonymous> (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/DirectoryDescriptionFilePlugin.js:24:12)
    at Storage.finished (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at ReadFileContext.callback (~/projects/webpack-sass-fail/app/node_modules/graceful-fs/graceful-fs.js:78:16)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)
Child extract-text-webpack-plugin:
        + 2 hidden modules

    ERROR in ./~/css-loader!./styles.scss
    Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~\projects\webpack-sass-fail\app
     @ ./~/css-loader!./styles.scss 3:10-66

    ERROR in ./~/css-loader!./styles.scss
    Module not found: Error: Cannot resolve 'file' or 'directory' ./typography in ~\projects\webpack-sass-fail\app
     @ ./~/css-loader!./styles.scss 4:10-70

resolve-url-loader を 2 回実行した後、別のエラー レポートが表示されました。

Hash: 0f2ad6d2bedd426d776a
Version: webpack 1.13.2
Time: 605ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  app
   [0] ./client.js 27 bytes {0} [built]
    + 1 hidden modules

ERROR in ./styles.scss
Module build failed: ModuleBuildError: Module build failed: CssSyntaxError: css-loader!~/projects/webpack-sass-fail/patterns/globals/colors.scss:14:9: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
    at Input.error (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/input.js:120:22)
    at Parser.unknownWord (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:457:26)
    at Parser.word (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:174:14)
    at Parser.loop (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:60:26)
    at parse (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parse.js:26:16)
    at new LazyResult (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/lazy-result.js:80:24)
    at Processor.process (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/processor.js:200:12)
    at processCss (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:24:2)
    at DependenciesBlock.onModuleBuildFailed (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at ~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.<anonymous> (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:32:18)
    at ~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:211:3
    at runMicrotasksCallback (internal/process/next_tick.js:58:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
Child extract-text-webpack-plugin:
        + 4 hidden modules

    ERROR in ./~/css-loader!../patterns/globals/colors.scss
    Module build failed: CssSyntaxError: css-loader!~/projects/webpack-sass-fail/patterns/globals/colors.scss:14:9: Unknown word
    You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
        at Input.error (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/input.js:120:22)
        at Parser.unknownWord (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:457:26)
        at Parser.word (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:174:14)
        at Parser.loop (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:60:26)
        at parse (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parse.js:26:16)
        at new LazyResult (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/lazy-result.js:80:24)
        at Processor.process (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/processor.js:200:12)
        at processCss (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:188:11)
        at Object.module.exports (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:24:2)
     @ ./~/css-loader!./styles.scss 3:10-89

    ERROR in ./~/css-loader!../patterns/globals/typography.scss
    Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~/projects/webpack-sass-fail/patterns/globals
     @ ./~/css-loader!../patterns/globals/typography.scss 3:10-76

II は、次の内容で単純な sass をコンパイルしようとします。

$grey: lightgrey;
$family: "Tahoma";

body {
  font-size: 12px;
}

p {
  border: 1px solid $grey;
  font-family: $family;
}

上記の webpack 構成では、エラー メッセージは表示されませんが、次のような無効な CSS コードが表示されます。

$family: "Tahoma";
$grey: lightgrey;

body {
  font-size: 12px;
}

p {
  border: 1px solid $grey;
  font-family: $family;
}

失敗の原因がどこにあるのかわかりません。

敬具、JBrieske

編集: @IRus の助けを借りて、問題を解決できました。

4

1 に答える 1

6

モジュールのビルドに失敗しました: ModuleNotFoundError: モジュールが見つかりません: エラー: ~/projects/webpack-sass-fail/app の 'file' または 'directory' ./colors を解決できません

colorに名前を変更color.scssしtypography.scssます。またはresolve、webpack config で適切にセットアップします。

標準の CSS パーサーで SCSS を解析しようとしました。postcss-scss パーサーで再試行してください

ローダーをExtractTextPlugin次のように変更します。

{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css!resolve-url!sass')}
// or
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', ['css', 'resolve-url', 'sass']) }

これは同等であるため：

{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css')}
{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css', 'resolve-url', 'sass')}

新しいエラーが発生するよりも：

未定義の変数: "$grey"。

これは、styles.scss のスペルミスです。

// border: 1px solid $grey;
border: 1px solid $gray;
于 2016-08-23T14:06:26.843 に答える