# Issue with CLI-bundler when overriding bootstrap styles (using SASS)

**URL:** <https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170>\
**Category:** Help Requests\
**Created:** [April 11, 2021, 7:05pm UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170 "2021-04-11T19:05:08Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [April 11, 2021, 7:05pm UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/1 "2021-04-11T19:05:08Z")

</div>

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):

```auto
/* 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:

```auto
{
  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):

```auto
{
  "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. 😊

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [April 11, 2021, 9:23pm UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/2 "2021-04-11T21:23:12Z")

</div>

Maybe import resolution works differently.

> [@Bart](#):
>
> `│ @import "bootstrap/scss/bootstrap.scss";`

Should become something like

```auto
│ @import "../../node_modules/bootstrap/scss/bootstrap.scss";

```

Hope this helps.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 12, 2021, 3:00am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/3 "2021-04-12T03:00:37Z")

</div>

Scss resolution is different from js/ts.

First make sure your skeleton is quite up to date, check aurelia\_project/tasks/process\_css.js, it should have sassPackageImporter.

Use `@import "~bootstrap/..."`. This syntax is unrelated to js bundler, it’s a sass thing. You can use it in webpack too.

Update: just saw this in webpack sass-loader doc:

> Using `~` is deprecated and can be removed from your code ( **we recommend it** ), but we still support it for historical reasons.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 12, 2021, 3:11am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/4 "2021-04-12T03:11:09Z")

</div>

Technically, I am not very keen for the webpack’s enhancement. It surely removes some pain from user’s perspective, but it deviates from sass/css spec.

In sass/css, `@import "foo"` means a local relative import. Webpack sass-loader tries local relative import first, then falls back to importing node\_modules/foo.

I would prefer `@import "~foo/..."` which is explicitly importing from a npm package.

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [April 12, 2021, 8:34am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/5 "2021-04-12T08:34:05Z")

</div>

Hi @ormasoftchile.

Thank you for your answer. Yes, I am aware that a direct explicit path (either relative or absolute) should do the job as well. But of course I was hoping that I could somehow get it to work with “module resolution”. Those long paths are pretty ugly. 😉

If using such explicit paths would be the only solution available, I might alternatively consider to download/copy those bootstrap SCSS files and include them locally in my project code instead.

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [April 12, 2021, 8:34am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/6 "2021-04-12T08:34:56Z")

</div>

Hi @huochunpeng.

Thank you very much for this information. I was unaware of the fact that CSS/SASS resolution differs from that of JS/TS. That’s something I will keep in mind from now on. With that `~` prefix in place, those errors are now resolved. 🕶

Your information about Webpack’s CSS import file resolution enhancement is somewhat disturbing to me. It might make Webpack a dubious choice when standards compliance is of importance, I guess. On the other hand, the available features and configuration options in Webpack and its various loaders are quite vast (if not overwhelming), which currently makes Webpack hard to neglect when investigating a stable, robust and future-proof deployment solution.

For now, I hope that I can get Aurelia’s CLI bundler functional for my current project based on Aurelia V1. There seem to be other issues with the CLI bundler in my current project, however. For example, I am now getting several Esprima-related error messages when the bundler is tracing files: `Unexpected token ...`, `Unexpected token ?`, or even `Unexpected token ILLEGAL`, depending on changes I make to various compilation settings in `tsconfig.json`. I will go and investigate those issues now. I will also dive into the Aurelia CLI bundler in more detail, hoping that I can find additional information/documentation there, but if I am unable to overcome those issues as well, I will try posting additional questions here on Discourse.

Anyway, thanks again for your help so far. 🙂

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 12, 2021, 9:28am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/7 "2021-04-12T09:28:33Z")

</div>

That esprima issue is quite bad for au1 cli bundler. Because of the old tech stack, cli bundler still uses esprima which has not been updated to understand newer JS syntax.

We have moved away from cli bundler to [dumber bundler](https://dumber.js.org) for Aurelia 2. I am also maintaining an unofficial Aurelia 1 dumber skeleton (`npx makes dumberjs`). You may want to try dumber instead of cli bundler, the config is much simpler and it solved many cli-bundler problems (due to its old tech stack).

Many users have been seeing the esprima issue in cli bundler now. I may need to find a way to replace esprima with other parser in cli bundler, to just get away from this annoying parsing issue.

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [April 12, 2021, 9:48am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/8 "2021-04-12T09:48:51Z")

</div>

Thanks! I will give the dumber bundler a try then. 👍

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 12, 2021, 10:09am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/9 "2021-04-12T10:09:36Z")

</div>

I got a cli-bundler ~~branch~~ (merged to master) for testing too.

You can update your package.json with `"aurelia-cli": "aurelia/cli",`, do a fresh `npm install` (don’t use yarn as it’s not fully compatible with git repo depedency). This should remove those esprima errors.

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [April 12, 2021, 11:16am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/10 "2021-04-12T11:16:18Z")

</div>

Hi @huochunpeng,

I just did as you instructed. I updated my `package.json` and did an `npm install`. And then I did an `npm run build`.

The Esprima errors are gone indeed.

But now I get a whole load of other errors and warnings. Instead of providing a summary, I decided to post the entire output here:

```
> testapp@0.1.0 build
> au build --env prod

Local aurelia-cli v2.0.2
Starting 'clean'...
Finished 'clean'
Starting 'readProjectConfiguration'...
INFO [Bundle] Manually adding package: 2.3.3 aurelia-bootstrapper
INFO [Bundle] Manually adding package: 1.2.1 aurelia-loader-default
INFO [Bundle] Manually adding package: 1.8.1 aurelia-pal-browser
INFO [Bundle] Manually adding package: 2.0.16 text
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processJson'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processJson'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'processMarkup'
Finished 'processCSS'
Finished 'buildTypeScript'
Starting 'writeBundles'...
INFO [Bundler] Tracing files ...
INFO [Bundler] Auto tracing package: 5.15.3 @fortawesome/fontawesome-free
INFO [Bundler] Auto tracing package: 1.0.3 aurelia-event-aggregator
INFO [Bundler] Auto tracing package: 1.3.1 aurelia-framework
INFO [Bundler] Auto tracing package: 1.4.0 aurelia-history-browser
INFO [Bundler] Auto tracing package: 1.0.2 aurelia-loader
INFO [Bundler] Auto tracing package: 1.1.1 aurelia-logging-console
INFO [Bundler] Auto tracing package: 1.0.7 aurelia-metadata
INFO [Bundler] Auto tracing package: 1.8.2 aurelia-pal
INFO [Bundler] Auto tracing package: 1.3.4 aurelia-polyfills
INFO [Bundler] Auto tracing package: 1.7.1 aurelia-router
INFO [Bundler] Auto tracing package: 1.5.3 aurelia-templating-binding
INFO [Bundler] Auto tracing package: 1.13.1 aurelia-templating-resources
INFO [Bundler] Auto tracing package: 1.4.0 aurelia-templating-router
INFO [Bundler] Auto tracing package: 1.0.0 aurelia-testing
WARN [Bundler] [ProjectDir]\src\features\gp-calendar\dev-app\app.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-calendar\src\elements\gp-calendar.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-html-editor\dev-app\app.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-html-editor\src\elements\gp-html-editor.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup-multiselect\dev-app\app.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup-multiselect\src\elements\gp-lookup-multiselect-selecteditem.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup-multiselect\src\elements\gp-lookup-multiselect.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup\dev-app\app.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup\src\elements\gp-lookup-listitem.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup\src\elements\gp-lookup.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-validation-summary\src\elements\gp-validation-summary.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Api
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/DateExtensions
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Helpers
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Holidays
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
INFO [Bundler] Auto tracing package: 2.29.1 moment
WARN [Bundler] [ProjectDir]\src\resources\elements\kermit-header.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\resources\elements\kermit-list-header.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\resources\elements\kermit-sidenav-menu.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\style\bootstrap-customized.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\style\style.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of typeface-open-sans:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "typeface-open-sans"
ERROR [Bundler] Unable to analyze typeface-open-sans
INFO [Bundler] Error: Unable to find package metadata (package.json) of typeface-open-sans
ERROR [Bundler] Failed to add Nodejs module typeface-open-sans
INFO [Bundler] Error: Unable to find package metadata (package.json) of typeface-open-sans
WARN [Bundler] [ProjectDir]\src\views\app\app.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\views\app\login.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\views\category\index.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\views\project\details.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\views\project\index.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
ERROR [BundledSource] Could not convert to AMD module, skipping [ProjectDir]\node_modules\@fortawesome\fontawesome-free\scss\brands.scss
ERROR [BundledSource] Error was: SyntaxError: unknown: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (5:1):

  3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  4 | */
> 5 | @import 'variables';
    | ^
  6 |
  7 | @font-face {
  8 | font-family: 'Font Awesome 5 Brands';
ERROR [Bundler] Failed to do transforms
INFO [Bundler] SyntaxError: [5:19]: Expected '('
{
  uid: 12,
  name: 'writeBundles',
  branch: false,
  error: ParseError [SyntaxError]: [5:19]: Expected '('
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at consume ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4370:9)
      at parseImportExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6406:5)
      at parseImportCallOrMetaExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6388:12)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6371:20)
      at parseDecoratorList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8261:22)
      at parseDecorators ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8254:23)
      at parseClassDeclaration ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8146:22)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4856:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25) {
    index: 205,
    line: 5,
    column: 19,
    description: "[5:19]: Expected '('",
    loc: { line: 5, column: 19 }
  },
  duration: [2, 309905000],
  time: 1618225977624
}
{
  uid: 2,
  name: '<series>',
  branch: true,
  error: ParseError [SyntaxError]: [5:19]: Expected '('
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at consume ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4370:9)
      at parseImportExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6406:5)
      at parseImportCallOrMetaExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6388:12)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6371:20)
      at parseDecoratorList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8261:22)
      at parseDecorators ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8254:23)
      at parseClassDeclaration ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8146:22)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4856:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25) {
    index: 205,
    line: 5,
    column: 19,
    description: "[5:19]: Expected '('",
    loc: { line: 5, column: 19 }
  },
  duration: [8, 400050300],
  time: 1618225977631
}
{
  uid: 0,
  name: '<series>',
  branch: true,
  error: ParseError [SyntaxError]: [5:19]: Expected '('
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at consume ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4370:9)
      at parseImportExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6406:5)
      at parseImportCallOrMetaExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6388:12)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6371:20)
      at parseDecoratorList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8261:22)
      at parseDecorators ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8254:23)
      at parseClassDeclaration ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8146:22)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4856:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25) {
    index: 205,
    line: 5,
    column: 19,
    description: "[5:19]: Expected '('",
    loc: { line: 5, column: 19 }
  },
  duration: [8, 415183000],
  time: 1618225977632
}
ParseError [SyntaxError]: [5:19]: Expected '('
    at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
    at consume ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4370:9)
    at parseImportExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6406:5)
    at parseImportCallOrMetaExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6388:12)
    at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6371:20)
    at parseDecoratorList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8261:22)
    at parseDecorators ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8254:23)
    at parseClassDeclaration ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8146:22)
    at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4856:20)
    at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25) {
  index: 205,
  line: 5,
  column: 19,
  description: "[5:19]: Expected '('",
  loc: { line: 5, column: 19 }
}

```

**Edit:**  
The errors regarding the typeface-open-sans package are resolved now. I forgot to install that package earlier.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 12, 2021, 11:30am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/11 "2021-04-12T11:30:55Z")

</div>

> [@Bart](#):
>
> `xxx.scss is not captured by any bundle file`

That’s probably your aurelia.json didn’t setup cssProcessor.source correctly.

Where is your npm package js-library installed?

The font awesome error means it tries to use JS parser to load css file. Show me how you import font awesome in your JS code.

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [April 12, 2021, 12:08pm UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/12 "2021-04-12T12:08:13Z")

</div>

Hi @huochunpeng.

Below I provide additional information regarding your last remarks. Please let me know if you need anything else. Thanks again.

**App creation**

I created the app using the aurelia CLI (`au new`) and entered the following choices:

- Please name this new project: » testapp
- Would you like to use the default setup or customize your choices? » Custom Project
- App or Plugin? » App
- Which bundler would you like to use? » CLI’s built-in bundler with an AMD module loader
- Which AMD module loader would you like to use? » Alameda
- What platform are you targeting? » Web
- What transpiler would you like to use? » TypeScript
- How would you like to setup your HTML template? » None
- What css preprocessor would you like to use? » Sass
- Do you want to add PostCSS processing » None
- Which unit test runner would you like to use? » None
- Would you like to configure e2e integration testing? » None
- What is your default code editor? » None
- Which features do you want to scaffold into your project? » Minimum
- Would you like to add a Dockerfile? » No

**aurelia.json**

Below are the concents of my `aurelia_project\aurelia.json` file. It should be the file as it was generated by the Aurelia CLI. I don’t remember that I made any changes to it. Certainly not regarding CSS/SASS setup.

```auto
{
  "name": "testapp",
  "type": "project:application",
  "paths": {
    "root": "src",
    "resources": "resources",
    "elements": "resources/elements",
    "attributes": "resources/attributes",
    "valueConverters": "resources/value-converters",
    "bindingBehaviors": "resources/binding-behaviors"
  },
  "transpiler": {
    "id": "typescript",
    "fileExtension": ".ts",
    "dtsSource": [
      "./types/**/*.d.ts"
    ],
    "source": [
      "src/**/*.ts"
    ]
  },
  "markupProcessor": {
    "source": [
      "src/**/*.html"
    ]
  },
  "cssProcessor": {
    "source": [
      "src/**/*.scss"
    ]
  },
  "jsonProcessor": {
    "source": [
      "src/**/*.json"
    ]
  },
  "platform": {
    "port": 9000,
    "host": "localhost",
    "open": false,
    "index": "index.html",
    "baseDir": ".",
    "output": "scripts"
  },
  "build": {
    "targets": [
      {
        "port": 9000,
        "index": "index.html",
        "baseDir": ".",
        "output": "scripts"
      }
    ],
    "options": {
      "minify": "stage & prod",
      "sourcemaps": "dev & stage",
      "rev": "prod",
      "cache": "dev & stage"
    },
    "bundles": [
      {
        "name": "app-bundle.js",
        "source": [
          "**/*.{js,json,css,html}"
        ]
      },
      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/promise-polyfill/dist/polyfill.min.js",
          "node_modules/alameda/alameda.js"
        ],
        "dependencies": [
          "aurelia-bootstrapper",
          "aurelia-loader-default",
          "aurelia-pal-browser",
          {
            "name": "aurelia-testing",
            "env": "dev"
          },
          "text"
        ]
      }
    ],
    "loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "plugins": [
        {
          "name": "text",
          "extensions": [
            ".html",
            ".css"
          ],
          "stub": false
        }
      ]
    }
  }
}

```

**js-library**

My `js-library` folder is a sibling of my project’s folder inside my git repository. Here is an extract of the directory structure:

```auto
<git repo root>
├───testapp
│ ├───aurelia_project
│ │ ├───environments
│ │ ├───generators
│ │ └───tasks
│ ├───node_modules
│ └───src
│ ├───api
│ │ ├───application
│ │ ├───categories
│ │ ├───messages
│ │ ├───projects
│ │ ├───rights
│ │ ├───roles
│ │ ├───scopes
│ │ ├───stories
│ │ ├───tasks
│ │ └───users
│ ├───ea-messages
│ ├───features
│ │ ├───gp-calendar
│ │ │ ├───dev-app
│ │ │ └───src
│ │ │ └───elements
│ │ ├───gp-highlight-text
│ │ │ └───src
│ │ │ └───attributes
│ │ ├───gp-html-editor
│ │ │ ├───dev-app
│ │ │ └───src
│ │ │ └───elements
│ │ ├───gp-lookup
│ │ │ ├───dev-app
│ │ │ └───src
│ │ │ └───elements
│ │ ├───gp-lookup-multiselect
│ │ │ ├───dev-app
│ │ │ └───src
│ │ │ └───elements
│ │ ├───gp-scroll-into-view
│ │ │ └───src
│ │ │ └───attributes
│ │ └───gp-validation-summary
│ │ ├───dev-app
│ │ └───src
│ │ └───elements
│ ├───models
│ ├───resources
│ │ ├───elements
│ │ └───value-converters
│ ├───style
│ └───views
│ ├───app
│ ├───category
│ ├───home
│ ├───project
│ └───~test
└───js-library
    ├───css
    │ └───webcomponents
    ├───js
    │ └───webcomponents
    ├───src
    │ └───webcomponents
    └───tests

```

The `js-library` folder contains a several legacy TypeScript modules that are still in use in my company.

It also contains a `package.json` file, because I added a conceptual setup for unit testing using Chai and Mocha. It’s used for nothing else. The code in `js-library` should not be considered as a real valid NPM package itself. It’s just an external location where shared JavaScript/TypeScript code is stored.

If the current setup causes trouble, I might simply remove the `package.json` and the NPM packages from `js-library`.

**Font Awesome**

Font Awesome is imported in my project in the first four lines of my `src\main.ts` file:

```auto
import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
import '@fortawesome/fontawesome-free/scss/brands.scss';
import '@fortawesome/fontawesome-free/scss/regular.scss';
import '@fortawesome/fontawesome-free/scss/solid.scss';

```

**Edit:**

In case you are wondering, I organized the code in my app’s `features` directory in such a way, that it will ease migration to Aurelia Plugins. In contrast to what the error messages indicate, the `dev-app` views _are_ referenced from a test view in `src\views\~test` and the SCSS files are referenced in the views’ HTML templates.

The test views are referenced in `src\main.ts`:

```auto
export function configure(aurelia: Aurelia) {
  Date.prototype.toJSON = function () { return moment(this).format(); }

  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'))
    .feature(PLATFORM.moduleName('features/gp-calendar/src/index'))
    .feature(PLATFORM.moduleName('features/gp-highlight-text/src/index'))
    .feature(PLATFORM.moduleName('features/gp-html-editor/src/index'))
    .feature(PLATFORM.moduleName('features/gp-lookup/src/index'))
    .feature(PLATFORM.moduleName('features/gp-lookup-multiselect/src/index'))
    .feature(PLATFORM.moduleName('features/gp-scroll-into-view/src/index'))
    .feature(PLATFORM.moduleName('features/gp-validation-summary/src/index'))
    .developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.start().then(async () => {
    const testPage = testPaths.get(window.location.pathname);

    if (testPage) {
      aurelia.setRoot(testPage);
      return;
    }

    // remaining bootstrap code omitted
  });
}

const testPaths = new Map<string, string>([
  ['/~test', PLATFORM.moduleName('views/~test/index')],
  ['/~test/gp-calendar', PLATFORM.moduleName('features/gp-calendar/dev-app/app')],
  ['/~test/gp-html-editor', PLATFORM.moduleName('features/gp-html-editor/dev-app/app')],
  ['/~test/gp-lookup', PLATFORM.moduleName('features/gp-lookup/dev-app/app')],
  ['/~test/gp-lookup-multiselect', PLATFORM.moduleName('features/gp-lookup-multiselect/dev-app/app')],
  ['/~test/gp-validation-summary', PLATFORM.moduleName('features/gp-validation-summary/dev-app/app')]
]);

```

The test views, like `features\gp-calendar\dev-app\app.html`, contain code like this:

```auto
<template>
  <require from="./app.scss"></require>

  <!-- remaining template code omitted -->
</template>

```

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 12, 2021, 11:16pm UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/13 "2021-04-12T23:16:00Z")

</div>

You got an impressive setup. To decide to migrate such a big app, webpack must have hurt you badly. 😄

Let’s try fixing this two issues first.

1. the unbundled scss files. I was wrong, it’s not in cssProcessor, but in the bundle, add scss to app-bundle ( ~~I might need to fix this in our skeleton~~ , updated [fix(cli-bundler): fix missing capture on scss file by 3cp · Pull Request #27 · aurelia/v1 · GitHub](https://github.com/aurelia/v1/pull/27/files)). This might fix the fontawesome error too.

> [@Bart](#):
>
> ```auto
> {
> "name": "app-bundle.js",
> "source": [
> "**/*.{js,json,css,scss,html}"
> ]
> },
> 
> ```

1. the js-library. It’s a local dependency, add following to vendor-bundle dependencies.

```auto
{ "name": "js-library", "path": "../../js-library" }

```

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [April 14, 2021, 7:16am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/14 "2021-04-14T07:16:40Z")

</div>

Hi @huochunpeng ,

My apologies. I read your reaction yesterday, but I was unable to respond to you.

I have added `scss` to the app-bundle, but I fail to locate the `scripts/vendor-bundle.js` file as referred to by `index.html`. Is it an automatically generated file? Or should I explicitly create one with some basic content?

I have not yet read the CLI bundler docs, so I guess I will have to take a look at that first. And perhaps I should also take a peek at the bundler’s source code as well.

As soon as I have worked out how to fix my code based on your suggestions, I will post my results here again.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 14, 2021, 8:47am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/15 "2021-04-14T08:47:09Z")

</div>

Yes, that vendor-bundle.js is one of the output files of the bundling process.

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [April 14, 2021, 9:46am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/16 "2021-04-14T09:46:06Z")

</div>

Ah. I see. Then I fear that the build already aborts before that file is generated in my project.

Anyway, I updated the app-bundle in `aurelia.json` and performed a new build. Font Awesome still gave errors (due to SCSS issues).

So (for now) I updated the imports of Font Awesome in my `main.ts` file like this:

```auto
//import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
//import '@fortawesome/fontawesome-free/scss/brands.scss';
//import '@fortawesome/fontawesome-free/scss/regular.scss';
//import '@fortawesome/fontawesome-free/scss/solid.scss';
import '@fortawesome/fontawesome-free/css/all.css';

```

That eliminated the Font Awesome error (for now). The build output now looks as follows:

```
> testapp@0.1.0 build
> au build --env prod

Local aurelia-cli v2.0.2
Starting 'clean'...
Finished 'clean'
Starting 'readProjectConfiguration'...
INFO [Bundle] Manually adding package: 2.3.3 aurelia-bootstrapper
INFO [Bundle] Manually adding package: 1.2.1 aurelia-loader-default
INFO [Bundle] Manually adding package: 1.8.1 aurelia-pal-browser
INFO [Bundle] Manually adding package: 2.0.16 text
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processJson'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processJson'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'processMarkup'
Finished 'processCSS'
Finished 'buildTypeScript'
Starting 'writeBundles'...
INFO [Bundler] Tracing files ...
INFO [Bundler] Auto tracing package: 5.15.3 @fortawesome/fontawesome-free
INFO [Bundler] Auto tracing package: 1.0.3 aurelia-event-aggregator
INFO [Bundler] Auto tracing package: 1.3.1 aurelia-framework
INFO [Bundler] Auto tracing package: 1.4.0 aurelia-history-browser
INFO [Bundler] Auto tracing package: 1.0.2 aurelia-loader
INFO [Bundler] Auto tracing package: 1.1.1 aurelia-logging-console
INFO [Bundler] Auto tracing package: 1.0.7 aurelia-metadata
INFO [Bundler] Auto tracing package: 1.8.2 aurelia-pal
INFO [Bundler] Auto tracing package: 1.3.4 aurelia-polyfills
INFO [Bundler] Auto tracing package: 1.7.1 aurelia-router
INFO [Bundler] Auto tracing package: 1.5.3 aurelia-templating-binding
INFO [Bundler] Auto tracing package: 1.13.1 aurelia-templating-resources
INFO [Bundler] Auto tracing package: 1.4.0 aurelia-templating-router
INFO [Bundler] Auto tracing package: 1.0.0 aurelia-testing
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Api
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/DateExtensions
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Helpers
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Holidays
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
INFO [Bundler] Auto tracing package: 2.29.1 moment
INFO [Bundler] Auto tracing package: 1.1.13 typeface-open-sans
ERROR [BundledSource] Could not convert to AMD module, skipping [ProjectDir]\src\features\gp-calendar\src\elements\gp-calendar.scss
ERROR [BundledSource] Error was: SyntaxError: unknown: Unexpected token (1:0)

> 1 | .gp-calendar-host {
    | ^
  2 | display: inline-block;
  3 |
  4 | > .gp-calendar-input {
ERROR [Bundler] Failed to do transforms
INFO [Bundler] SyntaxError: [1:1]: Unexpected token: '.'
{
  uid: 12,
  name: 'writeBundles',
  branch: false,
  error: ParseError [SyntaxError]: [1:1]: Unexpected token: '.'
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6378:13)
      at parseExpressionOrLabelledStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4941:20)
      at parseStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4926:20)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4876:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25)
      at parseSource ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4778:16)
      at Object.parseScript ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8777:12)
      at Function.parse.usesAmdOrRequireJs ([ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\lib\parse.js:553:26)
      at [ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\write\defines.js:57:28 {
    index: 1,
    line: 1,
    column: 1,
    description: "[1:1]: Unexpected token: '.'",
    loc: { line: 1, column: 1 }
  },
  duration: [2, 941659000],
  time: 1618391514061
}
{
  uid: 2,
  name: '<series>',
  branch: true,
  error: ParseError [SyntaxError]: [1:1]: Unexpected token: '.'
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6378:13)
      at parseExpressionOrLabelledStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4941:20)
      at parseStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4926:20)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4876:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25)
      at parseSource ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4778:16)
      at Object.parseScript ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8777:12)
      at Function.parse.usesAmdOrRequireJs ([ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\lib\parse.js:553:26)
      at [ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\write\defines.js:57:28 {
    index: 1,
    line: 1,
    column: 1,
    description: "[1:1]: Unexpected token: '.'",
    loc: { line: 1, column: 1 }
  },
  duration: [9, 645371500],
  time: 1618391514066
}
{
  uid: 0,
  name: '<series>',
  branch: true,
  error: ParseError [SyntaxError]: [1:1]: Unexpected token: '.'
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6378:13)
      at parseExpressionOrLabelledStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4941:20)
      at parseStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4926:20)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4876:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25)
      at parseSource ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4778:16)
      at Object.parseScript ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8777:12)
      at Function.parse.usesAmdOrRequireJs ([ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\lib\parse.js:553:26)
      at [ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\write\defines.js:57:28 {
    index: 1,
    line: 1,
    column: 1,
    description: "[1:1]: Unexpected token: '.'",
    loc: { line: 1, column: 1 }
  },
  duration: [9, 667220400],
  time: 1618391514068
}
ParseError [SyntaxError]: [1:1]: Unexpected token: '.'
    at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
    at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6378:13)
    at parseExpressionOrLabelledStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4941:20)
    at parseStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4926:20)
    at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4876:20)
    at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25)
    at parseSource ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4778:16)
    at Object.parseScript ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8777:12)
    at Function.parse.usesAmdOrRequireJs ([ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\lib\parse.js:553:26)
    at [ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\write\defines.js:57:28 {
  index: 1,
  line: 1,
  column: 1,
  description: "[1:1]: Unexpected token: '.'",
  loc: { line: 1, column: 1 }
}
```

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 14, 2021, 10:27am UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/17 "2021-04-14T10:27:41Z")

</div>

I forgot you imported fontawesome scss directly in js code. Yes cli-bundler would not handle scss file directly. You can only import compiled css file inside js code. (in html, you can do `<require from="./local-but-not-npm.scss"></require>`, cli-bundler will use compiled (by tasks/process-css.js) `./local-but-not-npm.css` automatically.)

That’s the same reason for the failure of `\src\features\gp-calendar\src\elements\gp-calendar.scss`. You should just do import gp-calendar.css in your js code, or doing require either scss or css in your gp-calendar.html.

Update: dumber bundler has better support of local scss import, you can do import local.scss in dumber.

You need to add my fix for local js-library for it to work. Update: does your js-library/ folder has a package.json?

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [April 14, 2021, 12:50pm UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/18 "2021-04-14T12:50:59Z")

</div>

Hmmm. The template in `\src\features\gp-calendar\src\elements\gp-calendar.html` actually uses a `<require>` tag to import the SCSS file:

```auto
<template class="gp-calendar-host"
          mouseup.delegate="elementMouseUp($event)"
          keyup.delegate="elementKeyUp($event)">

  <require from="./gp-calendar.scss"></require>

  <!-- ... -->
</template>

```

But it might altogether be a better idea for me to skip the CLI bundler and give the dumber bundler a try. In the (hopefully near) future I will migrate my project to Aurelia V2 and I guess it will be beneficial if I would be using the dumber bundler already by that time.

By the way… the reason for me to drop Webpack now is the fact that Aurelia V1 does not support Webpack 5 and I feel uncomfortable sticking with Webpack 4 and the many obsolete dependencies it requires. On the other hand, Webpack 5 is also pretty new and perhaps not all all features are already available in that new version. (That’s what’s stated on Webpack’s website regarding migration to version 5, at least.)

When I decided to give the CLI bundler a try, I was mistaken; I actually intended to use its “newest” version that was also used in Aurelia V2, but I was confused and I forgot that that one is called the “dumber bundler” now.

My apologies about causing you so much trouble. Unless you appreciate the efforts and consider them useful, I will continue to try to get it to work with the CLI bundler and keep providing feedback to you, but otherwise I would suggest that I drop this topic on Discourse and focus on the dumber bundler from now on.

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [April 14, 2021, 12:56pm UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/19 "2021-04-14T12:56:25Z")

</div>

Aha! I figured something out! It seems that the relative path `'./gp-calendar.scss'` does not work as expected. If I change it to `'gp-calendar.scss'` (so without the `./` prefix) the error is gone.

This actually seems to work:

```auto
<template class="gp-calendar-host"
          mouseup.delegate="elementMouseUp($event)"
          keyup.delegate="elementKeyUp($event)">

  <require from="gp-calendar.scss"></require>

  <!-- ... -->
</template>

```

Is this failing CLI bundler file resolution behavior using a relative path intentional?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 14, 2021, 10:23pm UTC](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170/20 "2021-04-14T22:23:50Z")

</div>

I cannot think of a valid reason for the “./” issue. Maybe the double `src/` in the path confused some cli bundler code.

[Next page](https://discourse.aurelia.io/t/issue-with-cli-bundler-when-overriding-bootstrap-styles-using-sass/4170.md?page=2)