[英]Webpack, sass-loader (or css-loader) nested file imports inside node_modules. File not found
I want to use primercss framework as sass. 我想将primercss框架用作sass。 I am using webpack to build my application. 我正在使用webpack构建我的应用程序。 I have downloaded the npm package and imported it using: @import "~primer-css/index.scss";
我已经下载了npm软件包,并使用以下命令导入了它:@import "~primer-css/index.scss";
. 。 The problem is that the build fails with this error: File to import not found or unreadable: primer-core/index.scss
, which is a subimport in the primer-css/index.scss
file. 问题是构建因以下错误而失败: File to import not found or unreadable: primer-core/index.scss
,它是primary primer-css/index.scss
文件中的子primer-css/index.scss
。 I think that it is a problem related to the webpack sass-loader or css-loader, the full-stack trace is the following: 我认为这是与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)
The loaders configuration is the following: 装载程序的配置如下:
{
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
}
}
]
})
}
Can anyone help me? 谁能帮我? Or shed some light on the problem? 还是阐明了这个问题?
So I think I should say that this issue seems very much unresolved and it doesn't even seem clear if it will be resolved as sass-loader is officially saying there is no problem, because this is how node-sass is supposed to work. 因此,我想我应该说这个问题似乎尚未解决,甚至还不清楚,因为sass-loader正式表示没有问题,是否可以解决,因为这应该是node-sass的工作方式。
If people are interested in the reading the official issue thread, it's still open over here on github. 如果人们有兴趣在阅读正式发布线程,它仍然开过来这里 GitHub上。 There are a couple of quick hacks described in the thread, but none of them worked that well for me, although they all basically do the same thing which is including the node_modules
folder in sass-imports. 线程中描述了几个快速的技巧,但是它们对我来说都不是一件好事,尽管它们基本上都做同样的事情,包括在sass-imports中包含node_modules
文件夹。
The reason they do this is because as you have described when you have a simple file that looks like: 他们这样做的原因是因为正如您所描述的,当您拥有一个如下所示的简单文件时:
@import "~primer-css/index.scss";
This does rely on sub-imports or external SASS files in the node_modules folder. 这确实依赖于node_modules文件夹中的子导入或外部SASS文件。 To be specific, these: 具体来说,这些:
/*!
* 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";
Because none of these sub-imports have the ~
in front of them, they aren't resolved. 由于这些子导入中没有一个在其前面带有~
,因此无法解析。
In fact, if you just try and compile primer-support/index.scss
it will actually work out of the box because all it's imports only depend on it's own module and thus it resolves: 实际上,如果您只是尝试编译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";
Nonetheless, after way longer than it should have taken there does seem to be a way around this, as 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
]
}
Which I changed to: 我改为:
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader?importLoaders=1!postcss-loader!sass-loader?includePaths[]=" + resolve(__dirname, 'node_modules')
})
}
Because I only wanted it checking for SCSS and because I wanted to both my CSS and SCSS to be bundled and minified together. 因为我只希望它检查SCSS,并且因为我想将CSS和SCSS捆绑在一起并缩小在一起。
However, this probably probably won't work for most people so I guess to fix your code sample it would look like: 但是,这对于大多数人来说可能不起作用,因此我想修复您的代码示例,如下所示:
{
loader: 'sass-loader',
options: {
config: {
path: path.resolve(__dirname, 'node_modules')
},
outputStyle: 'expanded',
sourceMap: true,
sourceMapContents: true
}
}
But I found the config
to be quite tricky, so ultimately I think the easiest way to include it is just by modifying the loader use
to: 但是我发现config
非常棘手,因此最终我认为最简单的方法就是将加载程序的use
修改为:
sass-loader?includePaths[]=" + resolve(__dirname, 'node_modules')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.