I'm using NX.dev with Angular projects and I have a few projects and libs.
Im having a few static CSS/SCSS files I want to share for all projects (Apps & libs)
First CSS file - I want to just bundle it in the projects, in order to do that I added it to the project JSON file per app like this.
"targets": {
"build": {
"styles": [
"libs/ui/src/lib/styles/style.bundle.css"
],
}
}
It's working great, But I'm not getting I'm getting the same effect for the libs (It's not working)...
Second SCSS file - this file is a global variable file, I want this file to be available on-demand in the lib SCSS files.
I want each file to be able to do this:
#import "variables";
Not sure how to achieve that.
Any idea how can I get these two files into my libs?
One file should add on compile and one on-demand.
Thanks in advance!
Related
My current project is setup into 3 main JS files.
1.js (contains jquery, bootstrap etc) around 15 js files
2.js (contains other addons like recaptcha, SAP stuff etc) around 20 files
3.js (contains over 80 custom JS files for my website)
Until this point these were minified by wro4j in a specific order. Meaning I had an XML file in which all my files were placed in the order they needed to be minified.
I'm switching to grunt for minification and I would like to do something like below
terser: {
my_project: {
files: {
'webroot/_ui/minified/file1.js': [
'webroot/_ui/responsive/common/js/*.js',
'webroot/_ui/responsive/common/owlCarousel/owl.carousel.min.js',
'webroot/_ui/responsive/common/swiper/swiper-bundle.js'
],
'webroot/_ui/minified/file2.js': [
'webroot/_ui/addons/common/js/*.js',
],
'webroot/_ui/minified/file3.js': [
'webroot/_ui/custom/common/js/*.js',
],
}
}
}
Can I get away with something similar or I have to maintain the order used in wro4j (meaning I type out individually all JS files in the order they need to be loaded)
Thank you!
I'm manually downloading these CSS and JS files from: https://github.com/1j01/os-gui
I'm not sure where in my Laravel 9 app I should place the CSS and JS files.
What's the proper way to do it? Should I just download and place the files in the public directory? But shouldn't I be utilizing Laravel 9's Mix to compile the JS CSS files, and if so how can I go about doing that?
This is the list of files I want to use:
css/layout.css
css/windows-98.css
css/windows-default.css
js/$Window.js
js/MenuBar.js
js/parse-theme.js
js/demo.js
js/jquery-3.3.1.js // i'll probably use v3.6.0 (or whatever is the latest version)
If you want those files to be optimized and controlled and also want that every request does not download a bunch of css and js files, you should use laravel mix which is installed by default
You should put those files inside /resources folder and compile them into a single file, adittionally you could purge with the mix purge plugin so your assets will be purged/optimized.
This is really simple in your webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.css('resources/css/app.css', 'public/css', [
// and in your app.css you can #import every css you need to load
]);
I'm trying to dynamically set the file paths to the static files (js & css) in the index.html file of my create-react-app such that they can point to different sub-directories depending on what I set in a settings.json file.
Example:
If I set the base_url in my settings.json file like this:
{
"BASE_PATH_URL": "/subdirec1"
}
I expect the file path in my index.html file to be like this:
<script src="/subdirec1/static/vendors/js/core/jquery-3.2.1.min.js" type="text/javascript"></script>
I'd be grateful if anyone could help me out here. Thanks!
If you're using webpack, you can use webpack variables that you can set within the webpack config object, which themselves come from a .json/.js file.
This is the example you can use if you're using webpack!
WARNING: Don't use the command below before reading up on it, because it will make a big mess of files you might not understand yet!
Since you're using create-react-app, I think it uses webpack under the hood but you need to npm run eject it to have more complete access to its configuration!
According to this blog (which is written for BS3), I should add the following lines to the angular.cli.json file.
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
The problem is that in the distribution I'm using (BS4 Alpha 6), there's no such file. In the dist directory, there's a bunch of files as follows.
alert.js
button.js
carousel.js
collapse.js
dropdown.js
modal.js
popover.js
scrollspy.js
tab.js
tooltip.js
util.js
Do I have to link to them each individually? Am I missing a minified file somewhere? I'm in dist so I assumed that it's the production version.
Should I go about it in a totally different way, perhaps? I'm trying the Angular CLI package since I want to test without Gulp, Grunt nor Webpack. Is there an approach where I can include, reqest, demand or append those file (preferably minified) to my web site?
The styles I've included my simply importing what I needed from the dist like this.
#import "~bootstrap/dist/css/bootstrap.min.css";
However, I'm a bit confused on how to handle JS of the BS.
You're looking in the wrong place.
The files you are seeing are in js/dist/. You should be looking in dist/js/.
I have lot of .js code in my project, but I want to use babel-plugin-add-module-exports to main.js file without affect to all .js files I have.
How can i do that?