我想要将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-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)
装载器配置如下:
{
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
}
}
]
})
}
有人能帮助我吗?或者解决这个问题给我一些提示?