Webpack，sass-loader（或css-loader）在node_modules里嵌套文件导入。 文件未find
我想使用primercss框架作为sass。 我正在使用webpack来构build我的应用程序。 我已经下载了npm包并使用它导入它：@import "~primer-css/index.scss"; 。 问题是，构build失败，这个错误： File to import not found or unreadable: primer-core/index.scss ，这是一个sub primer-css/index.scss文件。 我认为这是一个有关webpack sass-loader或css-loader的问题，全栈跟踪如下：
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)
装载机configuration如下：
{ 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 } } ] }) }
谁能帮我？ 或者对这个问题有所了解？
所以我想我应该说这个问题似乎还没有得到解决，甚至不清楚这个问题是否会得到解决，因为sass-loader正式说没有问题，因为这就是节点应该如何工作。
如果人们对阅读官方问题感兴趣，那么在github上仍然是开放的。 在线程中描述了一些快速入侵，但是没有一个对我来说效果不错，尽pipe它们基本上都做了同样的事情，包括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";
因为这些子input在他们面前都没有，所以没有解决。
实际上，如果你只是试着编译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";
尽pipe如此，本来应该采取的做法似乎有办法解决这个问题，正如本文所评论的
{ 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')