When migrating to v2, importing styles from `src` directory fails with `Can't find stylesheet to import`

[maninak]

Versions

• 2.0

Describe the bug

I'm upgrading from v1 --> v2 to use this awesome library with vue3.

With vue-toastification@^1 I was including/overriding styles like so:

@import 'vue-toastification/src/scss/_variables';
@import 'vue-toastification/src/scss/_toastContainer';
@import 'vue-toastification/src/scss/_toast';
@import 'vue-toastification/src/scss/_closeButton';
@import 'vue-toastification/src/scss/_progressBar';
@import 'vue-toastification/src/scss/_icon';
@import 'vue-toastification/src/scss/animations/_fade';

This was in accordance to the readme. In fact on the v2 docs the section still exists and is unchanged (i.e. I'm still following the docs).

But doing so gives me the following error from webpack/sass-loader

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
40 │ @import 'vue-toastification/src/scss/_variables';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/styles/overrides/_vue-toastification.override.scss 40:9  @import
  src/styles/index.scss 5:9                                    @import
  src/App.vue 2:9                                              root stylesheet

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss 4:14-419 14:3-18:5 15:22-427
 @ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.18.0.19:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

When inspecting the node-modules, the src directory clearly is not there.

Expected behavior

The scss files on which my app depends on, and the previous versions of this library was providing, are available and I can import them as before (preferably same paths to not have a breaking change, but I could live with updating the import paths).

Your Environment

• Device: laptop
• OS: linux mint
• Browser: chromium
• Version: v87

package.json:

{
  "dependencies": {
    "@weareredlight/denormalize_json_api": "^0.2.2",
    "core-js": "^3.8.1",
    "dayjs": "^1.9.7",
    "firebase": "^8.1.2",
    "vue": "^3.0.4",
    "vue-inline-svg": "^3.0.0-beta.1",
    "vue-router": "^4.0.1",
    "vue-toastification": "^2.0.0-beta.8",
    "vue3-google-map": "^0.4.0",
    "vuex": "^4.0.0-rc.2"
  },
  "devDependencies": {
    "@sclable/lint": "^1.1.9",
    "@types/jest": "^26.0.18",
    "@vue/cli-plugin-babel": "^4.5.9",
    "@vue/cli-plugin-router": "^4.5.9",
    "@vue/cli-plugin-typescript": "^4.5.9",
    "@vue/cli-plugin-unit-jest": "^4.5.9",
    "@vue/cli-plugin-vuex": "^4.5.9",
    "@vue/cli-service": "^4.5.9",
    "@vue/compiler-sfc": "^3.0.4",
    "@vue/test-utils": "^2.0.0-alpha.1",
    "fibers": "^5.0.0",
    "lint-staged": "^10.5.3",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "typescript": "^4.1.2"
  },
}

Additional context

It seems that the src directory was not included by mistake (e.g. there's an entry for it in your .npmrc`) or something else that changed?

[Maronato]

Hello, @maninak ! Thank you for reporting this. v2.0.0-beta.5 removed src from the bundle, but v2.0.0-beta.9 (released a couple of minutes ago) should have fixed it. Please give it a try :)

[maninak]

Working great again now, thank you for the quick response!