Today I tried migrating my current AureliaV1-based project to a new skeleton based on CLI’s built-in bundler instead of Webpack.
In my project, I use SASS and I override some bootstrap styling variables. This is my src\style\bootstrap-customized.scss
file (which I import in my src\main.ts
file):
/* Override Bootstrap variables (defined in "node_modules/bootstrap/scss/_variables.scss) */
/* omitted for brevity */
/* Import Bootstrap itself */
@import "bootstrap/scss/bootstrap.scss";
When I run npm build
, I get errors like these in the console:
{
uid: 8,
name: 'processCSS',
branch: false,
error: PluginError: src\style\bootstrap-customized.scss
Error: Can't find stylesheet to import.
╷
15 │ @import "bootstrap/scss/bootstrap.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\style\bootstrap-customized.scss 15:9 root stylesheet
at Object._newRenderError ([ProjectDir]\node_modules\sass\sass.dart.js:13537:19)
at Object._wrapException ([ProjectDir]\node_modules\sass\sass.dart.js:13374:16)
at StaticClosure._renderSync ([ProjectDir]\node_modules\sass\sass.dart.js:13349:18)
at Object.Primitives_applyFunction ([ProjectDir]\node_modules\sass\sass.dart.js:1089:30)
at Object.Function_apply ([ProjectDir]\node_modules\sass\sass.dart.js:6007:16)
at _callDartFunctionFast ([ProjectDir]\node_modules\sass\sass.dart.js:7676:16)
at Object.renderSync ([ProjectDir]\node_modules\sass\sass.dart.js:7654:18)
at DestroyableTransform._transform ([ProjectDir]\node_modules\gulp-dart-sass\index.js:142:34)
at DestroyableTransform.Transform._read ([ProjectDir]\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
at DestroyableTransform.Transform._write ([ProjectDir]\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:172:83) {
formatted: "Error: Can't find stylesheet to import.\n" +
' ╷\n' +
'15 │ @import "bootstrap/scss/bootstrap.scss";\r\n' +
' │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
' ╵\n' +
' src\\style\\bootstrap-customized.scss 15:9 root stylesheet',
line: 15,
column: 9,
file: 'c:\\Workspace\\GreenPower\\GP\\aurelia-kermit\\src\\style\\bootstrap-customized.scss',
status: 1,
messageFormatted: '\x1B[4msrc\\style\\bootstrap-customized.scss\x1B[24m\n' +
"Error: Can't find stylesheet to import.\n" +
' ╷\n' +
'15 │ @import "bootstrap/scss/bootstrap.scss";\r\n' +
' │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
' ╵\n' +
' src\\style\\bootstrap-customized.scss 15:9 root stylesheet',
messageOriginal: "Can't find stylesheet to import.\n" +
' ╷\n' +
'15 │ @import "bootstrap/scss/bootstrap.scss";\r\n' +
' │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
' ╵\n' +
' src\\style\\bootstrap-customized.scss 15:9 root stylesheet',
relativePath: 'src\\style\\bootstrap-customized.scss',
__safety: undefined,
_stack: undefined,
plugin: 'gulp-dart-sass',
showProperties: true,
showStack: false,
domainEmitter: DestroyableTransform {
_readableState: [ReadableState],
readable: true,
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
_writableState: [WritableState],
writable: true,
allowHalfOpen: true,
_transformState: [Object],
_destroyed: false,
_transform: [Function (anonymous)],
[Symbol(kCapture)]: false
},
domainThrown: false
},
duration: [ 0, 181123800 ],
time: 1618165547713
}
And this is my tsconfig.json
(the main one, in the project’s root folder):
{
"compileOnSave": false,
"compilerOptions": {
"allowJs": false,
"allowSyntheticDefaultImports": true,
"baseUrl": "src",
"disableSizeLimit": true,
"emitDecoratorMetadata": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"lib": [ "es2018", "dom" ],
"locale": "en",
"module": "esnext",
"moduleResolution": "node",
"noImplicitReturns": true,
"paths": {
"js-library/*": [ "../../js-library/*" ]
},
"removeComments": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"target": "es2018",
"typeRoots": [ "./node_modules/@types" ]
},
"include": [
"src",
"test"
],
"atom": {
"rewriteTsconfig": false
}
}
The code worked perfectly fine in the old (Webpack-based) skeleton, so I assume it’s just a configuration issue, but I fail to see it. Can somebody tell me what I am forgetting or doing wrong here? Thanks in advance.