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.
Related
When compile my *.scss into *.css, it show me a warning
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
The problem is, because that file is inside the node_module folder.
My question, how to you fix the scss inside the node_module? consider node_module folder is only create when you run npm install
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.
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 am trying to run an npm run eject on a new project so I can configure Webpack files, but I got this message:
✗ npm run eject
> location#0.1.0 eject /Users/danale/Projects/location
> react-scripts eject
NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:
Why is it referencing all the project folders? To be clear I am running the above command inside of one project folder I just created with CRA.
I am not in the folder with all my projects, I am in the folder with one newly created project. With that said, why is npm referencing all my other projects?
Before you eject a react project created with create-react-app they give you the following cookie cutter response of:
NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:
The reason for this is a lot of people want to have a granular level of control of their webpack.config.js file and you've to eject to get access to this file as it's obfuscated away within your react-scripts module. Now the part of the eject warning message saying:
NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
Is to inform you that you don't have to eject to take advantage of preprocessors, TypeScript, etc.... They tell you this because create-react-app didn't always support the easy addition of this functionality so people would eject to be able to use preprocessors and TypeScript.
You're correct that in order to use SASS all you have to do is:
Install the node-sass module with a: npm install node-sass
Then just create your .scss files and import your desired .scss file in the component you wish to use the styling at. Alternatively, you could also just have a "main" .scss file whose only job is to import other .scss files relevant for your app. Then import this "main" .scss file within your App.js file.
Now as for this part of the eject warning message:
This git repository has untracked files or uncommitted changes:
You're probably getting this because you've set up a git repository for a parent folder where you ran the create-react-app CLI. Basically, in one of your parent folders where your create-react-app interface is located at is a .git/config that points upstream to one of your remote repositories.
Hopefully that helps!
Between what I read in the documentation suggested in the error message and from tinkering with it, all you have to do is:
npm install node-sass
and then you can start changing css files to scss and creating other scss files for your project. No npm run eject necessary.
I use the Roots/Sage wordpress starter theme, which uses npm, gulp and bower.
I wan't to use the blueimp gallery in my theme.
Earlier I installed it with bower, but the new version of Bluimp/Gallery does not have bower.json file, and the creator of Blueimp/Gallery says:
With the latest version of NPM and its support for flat dependency
trees, I don't see the need for bower anymore.
How should I install Blueimp/Gallery in my theme?
I tried with npm install --save blueimp-gallery, but now gulp did not complie the css and js of Blueimp into my main.js and main.css. Should I still use bower?
I decided to use bower.
Edited my bower.json file, so it's build the files of blueimp/Gallery as well:
"overrides": {
"blueimp-gallery": {
"main": [
"css/blueimp-gallery.css",
"css/blueimp-gallery-indicator.css",
"css/blueimp-gallery-video.css",
"img/error.png",
"img/error.svg",
"img/loading.gif",
"img/play-pause.png",
"img/play-pause.svg",
"img/video-play.png",
"img/video-play.svg",
"js/blueimp-helper.js",
"js/blueimp-gallery.js",
"js/blueimp-gallery-fullscreen.js",
"js/blueimp-gallery-indicator.js",
"js/blueimp-gallery-video.js",
"js/blueimp-gallery-vimeo.js",
"js/blueimp-gallery-youtube.js"
]
}
}
I also edited my gulpfile.js, because the css of Blueimp/Gallery was looking for it's image in dist/img, but my gulpfile copied them to dist/images and dist/fonts (the svg's). So I added this line to the fonts and images gulp tasks:
.pipe(gulp.dest(path.dist + 'img'))