import styles from the library into the library
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 17k
- Forks
- 3.4k
- Avg merge
- 7h 42m
- Merged PRs (30d)
- 26
Description
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:
lessversion: ^4.1.3less-watch-compilerversion: ^1.16.3nodejsversion: 17.3.0reactversion: 18.0.2operating system: MacOS
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the failure using core-package/main.less and application-base/styles/main.less with the listed less-watch-compiler and Node versions. Start at the reported findLessImportsInFile and fileWatcher entry points, then determine whether the import path is resolved by the watcher or by Less. Done means establishing the supported import behavior and documenting or fixing the failing package-style import.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nodejs, react
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100