I want to use primercss framework as sass. I am using webpack to build my application. I have downloaded the npm package and imported it using: @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. I think that it is a problem related to the webpack sass-loader or css-loader, the full-stack trace is the following:
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.
If people are interested in the reading the official issue thread, it's still open over here on 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.The reason they do this is because as you have described when you have a simple file that looks like:
This does rely on sub-imports or external SASS files in the node_modules folder. To be specific, these:
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:Nonetheless, after way longer than it should have taken there does seem to be a way around this, as commented in this post
Which I changed to:
Because I only wanted it checking for SCSS and because I wanted to both my CSS and SCSS to be bundled and minified together.
However, this probably probably won't work for most people so I guess to fix your code sample it would look like:
But I found the
config
to be quite tricky, so ultimately I think the easiest way to include it is just by modifying the loaderuse
to: