I'm creating a new content type for 2sxc content and I'm trying to include some styling.
am I correct in assuming I add any custom css to 'src > styles > _styles.css'
if so, how do I update the package?
sorry for the newbie question and TIA
Regards
Martyn C
So yes, it's all SASS based. You should simply run npm ci in the root to restore all npm packages which are used for sass. Webpack should then take care of the building and all that :)
I suggest you have a look an the package.json where everything should be explained.
Related
I'd like to know one thing.
Let's assume I add the npm package in the package.json file and don't use it anywhere in the code. In this case do the unnecessary dependencies affect the bundle js size?
Webpack dont read or use package.json at all. So obvios answer is "No".
I want to add vuetify to my project, but it can only be added by downloading files.
I have downloaded vuetify.min.css and vuetify.min.js
What other files do I need to download?
If you are using the Vue CLI then you can just add it like so:
vue add vuetify
The doc: https://vuetifyjs.com/en/getting-started/installation/#vue-cli-install
It also contains other installation methods if that one doesn't suit you, if you want to install it manually I think there are only these two (as seen in the code working with the CDNs), but maybe you'll want to use de Material Design Icons then you need to download that as well.
I'm trying to learn more about package development by using Laravel Nova as a bit of a guide. I'm confused as to how Nova's assets are compiled, and part of that confusion stems from Nova not having a webpack.mix.js but instead a webpack.mix.js.dist.
I'm trying to model this within my package in order to compile and publish my assets for use in my project, but I get npm errors when trying to run any command
Cannot find module 'dir/dir/dir/package/webpack.mix'
I'm unsure as to why it is looking for this file in the first place, but it still seems to be an issue. To get to the root of why this is an issue and how I can fix this, I'd like to know what the difference between webpack.mix.js and webpack.mix.js.dist is.
Any feedback on this would be greatly appreciated. Thank you.
Files that end in '.dist' are generally the default distribution files that come from the package and should not be edited. They will be overwritten on package updates.
You can use them as a reference to add or replace configuration in your primary file(s).
From what I can gather, Laravel Nova creates it's real webpack.mix.js from this file when you activate a certain feature. (It's a paid product, I do not have a license to see it, I can only skim the documents.)
I'm completely new to laravel mix and npm in general so I'm at total loss here.
I'm using jquery plugins such as: https://github.com/noraesae/perfect-scrollbar
Now, I installed laravel mix since I needed laravel echo.
Got that working and running up, but since then the jquery plugins are not loading, all I'm getting is:
Uncaught TypeError: $(...).perfectScrollbar is not a function
I don't know, is this perhaps that the jquery is now loaded async and Mix overwrites the one which I have set up /div> way?
However, I noticed I could perhaps install this plugin via npm due to documentation via:
npm install perfect-scrollbar
I did that, it installed but how can I now possibly include it so that laravel mix loads it as well? I've spent the last 6 hours trying to find a way but I just can't understand how to do this. Any help would be greatly appreciated!
Ok... not sure I get where your problem is but here is a few things you can check...
First, mix will run webpack... wbpack.mix.js ... which will contain something like this if you did not change it:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Now, this will run webpack and compile your resources... in the case we are interested in here, app.js.
Did you include your library (perfect-scrollbar) in app.js as suggested in the perfect scrollbar doc?
var Ps = require('perfect-scrollbar');
You will also need to take care of the css for it as well.. by importing it in your app.scss ... if you are using sass as in the standard laravel install...
#import "node_modules/perfect-scrollbar/src/css/main.scss"
Rebuild and you should be good to go if you use Ps as the perfect-scrollbar object. You can also add it to the window instead... like window.Ps = require...
npm install just installs the package in your node_modules directory. Once there, you must import them into your compiled css and js application file.
Hope this helps.
Hello everyone I am new to JavaScript and my job requires me to design in 3d using JavaScript. I went through the website but it says to include three.js. How can I include three.js in the HTML? Is there a standard src that I can include to make my programs execute or is there another way for it ? Any help or recommendations would be gladly accepted.
if I could offer a friendly suggestion. Three.js is fairly advanced for a first time Javascript programmer, you might want to try some basic tutorials on HTML5 with Javascript, move your way up to library includes and such, then try your hand at Three.js. Here's a couple basic tutorial's on ThreeJS
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://stemkoski.github.io/Three.js/#hello-world
However, I digress, to include a library in Javascript you use:
<script src="relative_path/library_name.js"></script>
In your case, download the zip source, copy the build/three.min.js file to a folder relative to your html (like a "js" folder) and use:
<script src="js/three.min.js"></script>
Kind regards ~D
Or you can include the link directly from GitHub Project:
<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
Go to the download link at: https://github.com/mrdoob/three.js/archive/master.zip
Unzip, and copy any files you want from the build subdirectory to js/ or similar in your project.
Done.
npm install three --save-dev
See https://threejs.org/docs/#manual/en/introduction/Installation
To install all the developer dependencies, try this command:
npm i --save-dev #types/three