Build with scss additional data

GurovDmitriy commented 3 months ago

Describe the bug

The project defines scss files using @forward & @use, if there are any dependencies in the scss files, the development mode works, the build mode throws the Module has been loaded error. This happens even if you remove any dependencies in the scss files between each other and leave only 3 files main.scss, global.scss, _varables.scss. Help to correctly supply global.scss to component files without duplication. As I understand it, since the documentation does not contain a classic example of working with the system of preprocessor files, it means that the assembler cannot do this? This is strange in the era of new perfect tools.

Reproduction

https://github.com/BeautyLips/be-boilerplate-stack

Steps to reproduce

Use vue-playground-default boileplate Uncomment settings for vite config in field preprocessors. Comment handle @import "src/shared/assets/styles/global"; from files Run commands dev, build Pages Styles include examples using styles

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 9 5980HX with Radeon Graphics        
    Memory: 19.64 GB / 31.40 GB
  Binaries:
    Node: 20.13.1 - ~\AppData\Local\Volta\tools\image\node\20.13.1\node.EXE
    npm: 10.5.2 - ~\AppData\Local\Volta\tools\image\node\20.13.1\npm.CMD
  Browsers:
    Edge: Chromium (125.0.2535.67)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-vue: ^5.0.4 => 5.0.4
    @vitejs/plugin-vue-jsx: ^3.1.0 => 3.1.0
    vite: ^5.2.11 => 5.2.11

Used Package Manager

npm

Logs

Click to expand!

```shell vite v5.2.11 building for production... ✓ 171 modules transformed. x Build failed in 1.49s error during build: Error: Module loop: this module is already being loaded. ╷ 1 │ @use './src/shared/assets/styles/global.scss' as *;@forward "core"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src\shared\assets\styles\global.scss 1:1 root stylesheet at Object.wrapException (C:\Users\ASUS\Desktop\development\project\be-boilerplate-stack\vue-playground-default\node_modules\sass\sass.dart.js:2161:43) at C:\Users\ASUS\Desktop\development\project\be-boilerplate-stack\vue-playground-default\node_modules\sass\sass.dart.js:86895:27 at _wrapJsFunctionForAsync_closure.$protected (C:\Users\ASUS\Desktop\development\project\be-boilerplate-stack\vue-playground-default\node_modules\sass\sass.dart.js:4900:15) at _wrapJsFunctionForAsync_closure.call$2 (C:\Users\ASUS\Desktop\development\project\be-boilerplate-stack\vue-playground-default\node_modules\sass\sass.dart.js:35566:12) at _awaitOnObject_closure.call$1 (C:\Users\ASUS\Desktop\development\project\be-boilerplate-stack\vue-playground-default\node_modules\sass\sass.dart.js:35554:32) at Object._rootRunUnary (C:\Users\ASUS\Desktop\development\project\be-boilerplate-stack\vue-playground-default\node_modules\sass\sass.dart.js:5295:18) at StaticClosure. (C:\Users\ASUS\Desktop\development\project\be-boilerplate-stack\vue-playground-default\node_modules\sass\sass.dart.js:115880:16) at _CustomZone.runUnary$2$2 (C:\Users\ASUS\Desktop\development\project\be-boilerplate-stack\vue-playground-default\node_modules\sass\sass.dart.js:37018:39) at _Future__propagateToListeners_handleValueCallback.call$0 (C:\Users\ASUS\Desktop\development\project\be-boilerplate-stack\vue-playground-default\node_modules\sass\sass.dart.js:36080:51) at Object._Future__propagateToListeners (C:\Users\ASUS\Desktop\development\project\be-boilerplate-stack\vue-playground-default\node_modules\sass\sass.dart.js:5087:93) ERROR: "build:only" exited with 1. ```

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

sapphi-red commented 3 months ago

This error is expected. You're pulling in all assets here: https://github.com/GurovDmitriy/be-boilerplate-stack/blob/b1b3425bb839b5b3795d3c2f24f6638e6d00d4d0/vue-playground-default/src/shared/tools/ImageUrl.ts#L34 That makes ./src/shared/assets/styles/global.scss to be imported in the bundle and given that you prepend @use './src/shared/assets/styles/global.scss' as *; to all scss files, the error happens.

GurovDmitriy commented 3 months ago

Can you give a solution? What does the helper for image paths have to do with it? why does the same structure work with nuxt3?

GurovDmitriy commented 3 months ago

solved with

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "../src/shared/assets/styles/global.scss" as *;',
      },
    },
  },

vitejs / vite