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文件中的子進口。我認爲這是有關的WebPack SASS裝載機或CSS-裝載機的問題，全堆棧跟蹤如下：

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) 

的裝載機配置如下：

{ 
    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 
     } 
     } 
    ] 
    }) 
} 

能任何人都幫助我？或者對這個問題有所瞭解？

Answer 1

所以我覺得我應該說，這個問題似乎很沒有解決，它甚至不很明確，如果將被解析成青菜裝載機正式說法是沒有問題的，因爲這是怎麼節點-sass應該工作。

如果人們對閱讀官方問題感興趣，它仍然在github上通過here開放。在線程中描述了一些快速入侵，但它們都沒有爲我工作，儘管它們基本上都做了同樣的事情，包括在sass-imports中的node_modules文件夾。

他們這樣做的原因是因爲你，當你有一個簡單的文件看起來像描述：

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

這並不依賴於子進口或外部SASS文件中node_modules文件夾中。具體而言，這些：

/*! 
* 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 
    ] 
    } 

其中我變爲：

 { 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
       fallback: "style-loader", 
       use: "css-loader?importLoaders=1!postcss-loader!sass-loader?includePaths[]=" + resolve(__dirname, 'node_modules') 
      }) 
     } 

因爲我只希望它檢查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')