I am trying to build an NPM module that will allow an SCSS file to be exported and used across a number of applications.
The SCSS file imports another SCSS in another seperate node module.
My package structure is:
package-name
|--src
| |- overwrite.scss
|
|--package.json
|
|--webpack.config.js
|
|--node_modules
The issue I am facing is that currently I have the paths hardcoded for the import value. For example
$background-color: red;
#import '../node_module/fake_name/dist/core.scss'
I have a dependency in package.json file to ensure that fake_name module will always be in the node_modules folder of any project that will use my npm package.
What I am trying to achieve is set it that the path of #import will always look in the node_modules folder in the root of whatever project it is installed in. I have tired using ~ but I keep getting 'Error: File to import not found or unreadable'
Any help is appreciated.
Related
I have a very simple web project and I'm using npm init to create the package.json file for the project. My project structure is below:
ProjectFolder
--app /this is the folder for js files
--css
--scss
--lib /this is for files like jQuery
--index.html
When adding a node package, it will create a node_modules folder like this:
ProjectFolder
--node_modules
--app /this is the folder for js files
--css
--scss
--lib /this is for files like jQuery
--index.html
Let's say I add jquery through npm install and make it a dependency. Is it good practice to link to the jquery file in node_modules from my index.html or move the jquery file to my lib folder?
Is there a way to move the jquery file to my lib folder when installing?
I don't want to move the node_modules folder to the server and want to know the best practice.
Your package.json is essentially your link. It contains a list of the packages you are dependent on and their versions. If you install something using npm install it has to be a published npm package on an npm repository somewhere (either public or private). It downloads a zipped version of the npm package and unzips it into node_modules. Anything in there is automatically then available to your app. Hope that helps.
I use npm in my client side development.
I use ES6 and I import modules to mapApp.js file from library that I installed in node_modules folder with help of npm tool.
Here is how I import module to mapApp.js file:
import GML from 'ol/format/GML';
Where is 'ol/format/GML' is relative path to node_modules folder.
At some point I create my own module(in config.js file) outside of node_modules folder and I need to import it to mapApp.js file.
Here is picture of project archeticture:
My question is how can I config npm to make search for imports not only in node_modules folder but,
also in specific folder outside of node_modules?
I have an electron app with the following structure
- dist
| - index.html
| - node_modules
| - nm (is an exact copy of node_modules)
- package.json
| ...
if I refer to the node modules in my index.html as node_modules/module the app won't find the module if built with the build command from electron-builder. But if I change that line in my index.html to nm/module it is perfectly willing to load it.
It seems to me that electron-builder isn't copying node_modules into the application, but I can't see why it would do that. Is it excluding all folders named node_modules and how can I fix this?
I am trying to create an npm module. In my src directory I have index.ios.js and index.android.js. In my entry key of package.json I have index.js. This is resulting in import errors. Is it possible to use platform specific extensions in npm module?
Here is my package - https://github.com/Noitidart/react-native-buttonex
In summary - What should entry be if src/index.android.js src/index.ios.js
I have a custom NPM module which requires other SASS based NPM modules eg Breakpoint SASS and Susy.
In my modules package.json:
"dependencies": {
"breakpoint-sass": "^2.7.0",
"susy": "^2.2.12"
}
When I was using NPM v2 the dependnacies were nested. So in my module's SASS file I could just include the dependancies with this:
#import './node_modules/breakpoint-sass/stylesheets/breakpoint';
#import './node_modules/susy/sass/susy';
However as of NPM v3 dependancies are now installed as a flat structure.
In my projct root:
node_modules/custom
node_modules/breakpoint-sass
node_modules/susy
As I'm using Gulp SASS Ive got this working in 1 project using includePaths. However as a custom build task is required my module is essentially broken. Is there a solution to this?
I considered using a naked node-sass implementation within the module which would use includePaths, but this seems like a lot of work just to resolve a path.
A separate but possibly related issue is that I have fonts in my custom module which Im importing with #font-face in my custom module's SASS file. When I import my module's SASS file into my main project's SASS file then the #font-face paths are wrong.