import styles from the library into the library

[Dmitriy-Krivetsky]

Hello! We create a project with its own npm packages one of which is core (common package). I want to import bootstrap styles (from node_modules) into the core, but I'm having problems with imports in the base application

To reproduce:

core-package:

// main.less
@import "bootstrap/dist/css/bootstrap.min.css";
// I have also tried this recording option
@import "~bootstrap/dist/css/bootstrap.min.css";

application-base:

// main.less
@import "core-package/dist/styles/main";
// I have also tried this recording option
@import "~core-package/dist/styles/main";

Structure for greater understanding:

src
- node_modules
-- bootstrap
-- core-package
--- main.less (core)
- styles
-- main.less (app)

Current behavior:

When I start application-base

 application-base@0.0.1 start
> concurrently --kill-others "less-watch-compiler --config less-watcher.config.json" "react-scripts start"
[0] Config file /Users/User/Projects/application-base/app/less-watcher.config.json is loaded.
[0] Watching directory for file changes.
[0] node:internal/fs/utils:344
[0]     throw err;
[0]     ^
[0] 
[0] Error: ENOENT: no such file or directory, stat '/Users/User/Projects/application-base/app/src/styles/core-package/dist/styles/main'
[0]     at Object.statSync (node:fs:1538:3)
[0]     at Object.findLessImportsInFile (/Users/User/Projects/application-base/app/node_modules/less-watch-compiler/dist/lib/filesearch.js:15:20)
[0]     at Object.fileWatcher (/Users/User/Projects/application-base/app/node_modules/less-watch-compiler/dist/lib/lessWatchCompilerUtils.js:235:38)
[0]     at /Users/User/Projects/application-base/app/node_modules/less-watch-compiler/dist/lib/lessWatchCompilerUtils.js:86:40
[0]     at /Users/User/Projects/application-base/app/node_modules/less-watch-compiler/dist/lib/lessWatchCompilerUtils.js:67:27
[0]     at FSReqCallback.oncomplete (node:fs:199:5) {
[0]   errno: -2,
[0]   syscall: 'stat',
[0]   code: 'ENOENT',
[0]   path: '/Users/User/Projects/application-base/app/src/styles/core-package/dist/styles/main'
[0] }
[0] 
[0] Node.js v17.3.0
[0] less-watch-compiler --config less-watcher.config.json exited with code 1
--> Sending SIGTERM to other processes..
[1] react-scripts start exited with code SIGTERM

Expected behavior:

I want to enable importing bootstrap styles into a core less file and just import the core less file to connect all the styles

Environment information:

• less version: ^4.1.3
• less-watch-compiler version: ^1.16.3
• nodejs version: 17.3.0
• react version: 18.0.2
• operating system: MacOS

[iChenLei]

Less self importer https://lesscss.org/features/#import-atrules-feature webpack import resolver https://github.com/webpack-contrib/less-loader#imports

cc @matthew-dean

[Dmitriy-Krivetsky]

Less self importer https://lesscss.org/features/#import-atrules-feature webpack import resolver https://github.com/webpack-contrib/less-loader#imports

cc @matthew-dean

Thanks for the prompt reply I previously tried some solutions from these sources, adjusting webpack.config.js also failed

The weird thing is that npm start works sometimes, maybe 3/10 starts

But the error changed to:

> application-base@0.0.1 start
> concurrently --kill-others "less-watch-compiler --config less-watcher.config.json" "PORT=4000 react-scripts start"

[0] Config file /Users/User/Projects/application-base/app/less-watcher.config.json is loaded.
[0] Watching directory for file changes.
[0] node:internal/fs/utils:344
[0]     throw err;
[0]     ^
[0] 
[0] Error: ENOENT: no such file or directory, stat '/Users/User/Projects/application-base/app/src/styles/bootstrap/dist/css/bootstrap.min.css'
[0]     at Object.statSync (node:fs:1538:3)
[0]     at Object.findLessImportsInFile (/Users/User/Projects/application-base/app/node_modules/less-watch-compiler/dist/lib/filesearch.js:15:20)
[0]     at Object.fileWatcher (/Users/dmitrykrivetsky/Projects/application-base/app/node_modules/less-watch-compiler/dist/lib/lessWatchCompilerUtils.js:235:38)
[0]     at /Users/User/Projects/application-base/app/node_modules/less-watch-compiler/dist/lib/lessWatchCompilerUtils.js:86:40
[0]     at /Users/User/Projects/application-base/app/node_modules/less-watch-compiler/dist/lib/lessWatchCompilerUtils.js:67:27
[0]     at FSReqCallback.oncomplete (node:fs:199:5) {
[0]   errno: -2,
[0]   syscall: 'stat',
[0]   code: 'ENOENT',
[0]   path: '/Users/User/Projects/application-base/app/src/styles/bootstrap/dist/css/bootstrap.min.css'
[0] }
[0] 
[0] Node.js v17.3.0
[0] less-watch-compiler --config less-watcher.config.json exited with code 1
--> Sending SIGTERM to other processes..
[1] react-scripts start exited with code SIGTERM

Process finished with exit code 1

[matthew-dean]

This looks like an issue with less-watch-compiler which seems to be independently trying to resolve imports?