SassError: Can't find stylesheet to import. -> @import '~@swimlane/ngx-datatable/themes/bootstrap.scss'

[elpidaguy]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

I am using @swimlane/ngx-datatable in one of my Angular Projects, when I do ng build --configuration=myconfig on my local system, it builds without any errors and it even runs well by doing ng serve.

The problem is when I try to run same commands on Github Actions it fails with following errors:

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import. ╷ 13 │ @import '~@swimlane/ngx-datatable/themes/bootstrap.scss'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src/styles.scss 13:9 root stylesheet at processResult (/home/runners/actions-runner/_work/ui/ui/node_modules/webpack/lib/NormalModule.js:713:19) at /home/runners/actions-runner/_work/ui/ui/node_modules/webpack/lib/NormalModule.js:819:5 at /home/runners/actions-runner/_work/ui/ui/node_modules/loader-runner/lib/LoaderRunner.js:400:11 at /home/runners/actions-runner/_work/ui/ui/node_modules/loader-runner/lib/LoaderRunner.js:252:18 at context.callback (/home/runners/actions-runner/_work/ui/ui/node_modules/loader-runner/lib/LoaderRunner.js:124:13) at Object.callback (/home/runners/actions-runner/_work/ui/ui/node_modules/sass-loader/dist/index.js:54:7) at Worker.<anonymous> (/home/runners/actions-runner/_work/ui/ui/node_modules/@angular-devkit/build-angular/src/sass/sass-service.js:134:25) at Worker.emit (node:events:513:28) at MessagePort.<anonymous> (node:internal/worker:236:53) at MessagePort.[nodejs.internal.kHybridDispatch] (node:internal/event_target:736:20) Error: Process completed with exit code 1.

StackOverflow Link Expected behavior

It should compile and run the requied libraries on github actions, same as local machine.

Note: If I comment bootstrap.scss from my styles.scss file, it throws same error to the next import which are as follows:

@import '~@swimlane/ngx-datatable/index.css'; @import '~@swimlane/ngx-datatable/themes/bootstrap.scss'; @import '~@swimlane/ngx-datatable/themes/material.scss'; @import '~@swimlane/ngx-datatable/themes/dark.scss'; @import '~@swimlane/ngx-datatable/assets/icons.css';

Reproduction of the problem

Please tell us about your environment:

Github Actions using docker

• Table version:

  "@swimlane/ngx-datatable": "^20.0.0",

• Angular version:

"@angular-devkit/build-angular": "~12.2.7", "@angular/cli": "~12.2.7", "@angular/compiler-cli": "~12.2.0" node version: 16.17.1

• Browser: [all]

• Language: [TypeScript 4.3.5]

[pods13]

I had the same error, only with material.scss which I imported in my style.scss like this:

@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';

In the end, I moved those lines to the styles configuration under angular.json:

            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/@swimlane/ngx-datatable/index.scss",
              "./node_modules/@swimlane/ngx-datatable/themes/material.scss",
              "./node_modules/@swimlane/ngx-datatable/assets/icons.css",
              "src/styles.scss"
            ],

And it starts working again. I coudn't figure the reason why tho

[antonio-spinelli]

The problem seems to be caused by the "exports" node in package.json It should be something like

{
  ...
  "exports": {
    "./package.json": {
      "default": "./package.json"
    },
    ".": {
      "types": "./swimlane-ngx-datatable.d.ts",
      "esm2020": "./esm2020/swimlane-ngx-datatable.mjs",
      "es2020": "./fesm2020/swimlane-ngx-datatable.mjs",
      "es2015": "./fesm2015/swimlane-ngx-datatable.mjs",
      "node": "./fesm2015/swimlane-ngx-datatable.mjs",
      "default": "./fesm2020/swimlane-ngx-datatable.mjs"
    },
    "./index.css": "./index.css",
    "./index.scss": "./index.scss",
    "./assets/": "./assets/",
    "./themes/": "./themes/"
  },
  ...
}

[acyvas]

This is because ~ expressions are deprecated in Angular 14. https://stackoverflow.com/questions/70082698/tilde-in-scss-use-statement-no-longer-resolving-to-node-modules-as-of-angular Solution:

1. add following property after style in angular.json "stylePreprocessorOptions": { "includePaths": [ "./node_modules" ] }
2. remove all ~ from global.scss

[emarbo]

Hi, I'm using Angular 15. In my case, the compiler complains about the exports issue pointed out by @antonio-spinelli here. So I suppose the right solution would be modifying ngx-datatable to export the required CSS.

Here is the compiler error:

./src/app/styles/styles.scss - Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Package path ./index.css is not exported from package /home/xxxx/user-console/node_modules/@swimlane/ngx-datatable (see exports field in /home/xxxx/user-console/node_modules/@swimlane/ngx-datatable/package.json)

I'm using another library (Nebular) that exports its CSS files, and I can import them as follows:

// Works
@use "@nebular/theme/styles/themes/default";
// Fails
@import "@swimlane/ngx-datatable/index.css";
// Works
@import "../../../node_modules/@swimlane/ngx-datatable/index.css";

The Nebular exports key (in my node_modules) looks like this:

Nebular package.json

```json "exports": { "./styles/core/mixins": { "sass": "./styles/core/_mixins.scss" }, "./styles/core/variants": { "sass": "./styles/core/_variants.scss" }, "./styles/global/typography/typography": { "sass": "./styles/global/typography/_typography.scss" }, ... "./package.json": { "default": "./package.json" }, ".": { "types": "./nebular-theme.d.ts", "esm2020": "./esm2020/nebular-theme.mjs", "es2020": "./fesm2020/nebular-theme.mjs", "es2015": "./fesm2015/nebular-theme.mjs", "node": "./fesm2015/nebular-theme.mjs", "default": "./fesm2020/nebular-theme.mjs" } ```

My includePaths does contain only my styles (that import the @nebular and ngx-datatable styles):

Project's angular.json

```json "styles": [ "src/app/styles/styles.scss" ], "stylePreprocessorOptions": { "includePaths": [ "src/app/styles" ] }, ```

[sommmen]

I tried migrating from 20.0.0 to 20.1.0 but couldn't find a workaround for this issue.

[anuj9196]

Do you know if this library is maintained? There was no update on this library for a long time, so I had to switch to https://www.npmjs.com/package/@boring.devs/ngx-datatable.

[james9001]

I'm using Ionic Angular 6.1 (with Angular 15). This works:

@import "../node_modules/@swimlane/ngx-datatable/index.css";
@import "../node_modules/@swimlane/ngx-datatable/themes/material.scss";
@import "../node_modules/@swimlane/ngx-datatable/assets/icons.css";

Seems preferable to me to keep the imports in code and not have to configure angular.json