Webpack、sass-loader（またはcss-loader）は、node_modules内のファイルのネストをインポートします。ファイルが見つかりません

Question

私はprimercssフレームワークをsassとして使いたいと思います。私はwebpackを使って自分のアプリケーションを構築しています。私はnpmパッケージをダウンロードし、それを使用してインポートしました：@import "~primer-css/index.scss";。問題は、このエラーでビルドが失敗することです。File to import not found or unreadable: primer-core/index.scssは、primer-css/index.scssファイルのサブインポートです。

{ 
    test: /\.scss$/, 
    use: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: [ 
     { 
     loader: 'css-loader', 
     options: { 
      modules: true, 
      minimize: true, 
      sourceMap: true, 
      importLoaders: 2, 
      localIdentName: '[name]__[local]' 
     } 
     }, 
     { 
     loader: 'postcss-loader', 
     options: { 
      config: { 
      path: path.resolve(__dirname, 'postcss.config.js') 
      }, 
      sourceMap: true 
     } 
     }, 
     { 
     loader: 'sass-loader', 
     options: { 
      outputStyle: 'expanded', 
      sourceMap: true, 
      sourceMapContents: true 
     } 
     } 
    ] 
    }) 
} 

ことができます：

ERROR in ./node_modules/css-loader?{"modules":true,"minimize":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[name]__[local]"}!./node_modules/postcss-loader/lib?{"config":{"path":"/Users/vicaba/Projects/medself/medself-client/development/webpack/postcss.config.js"},"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"outputStyle":"expanded","sourceMap":true,"sourceMapContents":true}!./src/theme/theme.scss 
Module build failed: 
@import "primer-core/index.scss"; 
^ 
     File to import not found or unreadable: primer-core/index.scss. 
Parent style sheet: /Users/vicaba/Projects/medself/medself-client/development/node_modules/primer-css/index.scss 
     in /Users/vicaba/Projects/medself/medself-client/development/node_modules/primer-css/index.scss (line 14, column 1) 
Error: 
@import "primer-core/index.scss"; 
^ 
     File to import not found or unreadable: primer-core/index.scss. 
Parent style sheet: /Users/vicaba/Projects/medself/medself-client/development/node_modules/primer-css/index.scss 
     in /Users/vicaba/Projects/medself/medself-client/development/node_modules/primer-css/index.scss (line 14, column 1) 
    at options.error (/Users/vicaba/Projects/medself/medself-client/development/node_modules/node-sass/lib/index.js:291:26) 
@ ./src/theme/theme.scss 4:14-200 
@ ./src/bootstrap.js 
@ multi ./src/bootstrap.js 

ERROR in ./src/theme/theme.scss 
Module build failed: ModuleBuildError: Module build failed: 
@import "primer-core/index.scss"; 
^ 
     File to import not found or unreadable: primer-core/index.scss. 
Parent style sheet: /Users/vicaba/Projects/medself/medself-client/development/node_modules/primer-css/index.scss 
     in /Users/vicaba/Projects/medself/medself-client/development/node_modules/primer-css/index.scss (line 14, column 1) 
    at runLoaders (/Users/vicaba/Projects/medself/medself-client/development/node_modules/webpack/lib/NormalModule.js:194:19) 
    at /Users/vicaba/Projects/medself/medself-client/development/node_modules/loader-runner/lib/LoaderRunner.js:364:11 
    at /Users/vicaba/Projects/medself/medself-client/development/node_modules/loader-runner/lib/LoaderRunner.js:230:18 
    at context.callback (/Users/vicaba/Projects/medself/medself-client/development/node_modules/loader-runner/lib/LoaderRunner.js:111:13) 
    at Object.asyncSassJobQueue.push [as callback] (/Users/vicaba/Projects/medself/medself-client/development/node_modules/sass-loader/lib/loader.js:55:13) 
    at Object.<anonymous> (/Users/vicaba/Projects/medself/medself-client/development/node_modules/async/dist/async.js:2244:31) 
    at Object.callback (/Users/vicaba/Projects/medself/medself-client/development/node_modules/async/dist/async.js:906:16) 
    at options.error (/Users/vicaba/Projects/medself/medself-client/development/node_modules/node-sass/lib/index.js:294:32) 

ローダーの構成は以下の通りである。私はそれがWebPACKのはSASS-ローダーまたはCSS-ローダーに関連する問題であることを考えて、フルスタックトレースは以下のとおりです。誰も私を助ける？または、問題を明らかにする

Answer 1

は、だから、私はこの問題は非常に多くの未解決のようだと言うべきだと思いますし、それがが正式に問題がないと言っているSASS-ローダとして解決されるならば、これはどのようにノードであるので、それも、明確でいないようです-sassが動作するはずです。

もし公式スレッドの読解に興味がある人は、まだギットボックスのhere以上です。スレッドで説明されているいくつかの簡単なハックがありますが、それらのどれもが基本的にはsass-importsにnode_modulesフォルダを含む同じことをしていますが、私にとってはうまく機能しませんでした。

@import "~primer-css/index.scss"; 

これはnode_modulesフォルダにサブ輸入または外部のSASSファイルに依存していない：あなたはのように見える単純なファイルを持っている場合、あなたが説明したようので、彼らはこれを行う

理由があります。具体的には、これら：これらのサブ輸入のどれもが彼らの前に~を持っていないので

/*! 
* Primer 
* http://primer.github.io 
* 
* Released under MIT license. Copyright (c) 2017 GitHub Inc. 
*/ 

// Primer master file 
// 
// Imports all Primer files in their intended order for easy mass-inclusion. 
// Should you need specific files, you can easily use separate `@import`s. 

// Global requirements 
@import "primer-core/index.scss"; 
@import "primer-product/index.scss"; 
@import "primer-marketing/index.scss"; 

は、彼らが解決されません。

実際にはあなただけ試してみて、primer-support/index.scssをコンパイルした場合、それは実際にすべてのそれの輸入だけで、それ自身のモジュールに依存しているため、箱から出して動作しますので、それを解決します。それにもかかわらず

// variables 
@import "./lib/variables/typography.scss"; 
@import "./lib/variables/colors.scss"; 
@import "./lib/variables/layout.scss"; 
@import "./lib/variables/misc.scss"; 

// mixins 
@import "./lib/mixins/typography.scss"; 
@import "./lib/mixins/layout.scss"; 
@import "./lib/mixins/buttons.scss"; 
@import "./lib/mixins/misc.scss"; 

、後の方法よりも長いです

：それは私がに変更commented in this post

{ 
    test: /\.s?css$/, 
    loaders: [ 
     'css', 
     'sass?includePaths[]='+ path.resolve(__dirname, 'node_modules') + 
     '&includePaths[]='+ path.resolve(__dirname, 'bower_components') 
     // tells sass-loader to look in these dirs when resolving files 
    ] 
    } 

として、これを回避する方法であるように見えるんが取られている必要があります

私はSCSSをチェックしたいだけで、CSSとSCSSの両方をバンドルして一緒に縮小したかったからです。

しかし、これはおそらく、おそらく私はあなたのコードサンプルを修正するために推測するので、それは次のようになり、ほとんどの人々のために動作しません。

 { 
     loader: 'sass-loader', 
     options: { 
      config: { 
      path: path.resolve(__dirname, 'node_modules') 
      }, 
      outputStyle: 'expanded', 
      sourceMap: true, 
      sourceMapContents: true 
     } 
     } 

しかし、私はconfigはかなりトリッキーであることが判明ので、最終的に私が思いますそれを含める最も簡単な方法は、ローダーuseを次のように変更することです。

sass-loader?includePaths[]=" + resolve(__dirname, 'node_modules')