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')