There's a problem installing 3rd party components from npm. For example there's a dropdown react module, I can use it easily in my module. But I have to declare its style and other dependencies of the component in many modules of mine.
Like for this component
I have to inject its style in every of my module
import 'icheck/skins/all.css';
How to solve this problem?
Assuming you're using a dropdown library, which we'll call Dropdown, you could create a custom module, called MyDropdown, where you import your CSS and export Dropdown.
All other modules that use Dropdown would import it from MyDropdown. The CSS will have been loaded along with it.
Related
I've been trying to use Dynamic Importing in Nextjs in order to use the screenfull library but it hasn't worked.
import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})
You're using dynamic imports incorrectly. The idea is that you can import part of a JS module inside of another piece of JS code, so you don't have to preload or load the entire library. An example might be doing a dynamic import after an async call.
Next has some other great examples of how to use this functionality in your application.
you can create file in #utils folder with below code:
import screenfull from 'screenfull';
export default screenfull
then in your component do something like so:
import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../#utils/screenfull'))
The first question that comes to mind is what's the error you're getting?
There's no reason you shouldn't be able to import any library you've installed locally!
Did you actually install that package by running npm install screenfull on your terminal?
So I'm new to the Vue CLI and one of the features that I would like to use is
vue serve <component name>
The problem I am immediately running into is there are some js libraries like moment that I am using in those components, so do I need to add an import statement in my component just for local testing? Is there anyway to set this globally and if so can I access it when i try to serve an individual component?
Once you run npm i -s moment, you can either import moment in your main.js Vue entry point, like this:
import moment from 'moment';
Vue.use(moment);
Or, you can use it locally in your component script, with just a local import within the <script></script> tag.
import moment from 'moment';
My preference is the former, since it allows me to reduce duplication if I need it in multiple files. Either way, to access in a function, once it is imported in one of those two ways, you can use it in component methods and lifecycle hooks.
Import your plugins in your main.js and then use like so;
import Vue from "vue";
//this is called only once before you start importing other packages
import YourPlugin from "yourplugin";
Vue.use(YourPlugin)
The officially recommended way to customize / theme bootstrap is by overriding the bootstrap variables using sass. But how do I do this, or rather, how do I add this part of the process into the Vue webpack workflow ?
Googling led to try editing the vue.config.js file to add scss loader into webpack but I am unable to find the required file.
This is the directory structure
I have used vue-cli v3.4 to setup the project.
I am using vanilla bootstrap and not the bootstrap-vue components.
Make a file called custom.scss. Go into the node_modules/bootstrap/scss directory and copy everything from _variables.scss. Paste these into your custom.scss.
In your style.scss import your custom.scss before you import bootstrap.scss.
Now in your main.js import #/assets/style.scss.
You will need to remove the !default flag from any variables you wish to override in your custom.scss for them to take effect, as well.
Create a file /css/bootstrap-custom.scss, with the following:
// your variable overrides
// modify theme colors map
$theme-colors: (
"primary":#42b883,
//...other variables, you can find them in node_modules/bootstrap/scss/_variables.scss
);
// import to set changes
#import "~bootstrap/scss/bootstrap";
In the main script, import the added file instead of the current imported bootstrap css file:
// import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '#/css/bootstrap-custom.scss';
Reference: Bootstrap, Variable defaults
Right now I pull in all my own es6 modules and create a bundle using Rollup.
Recently I started using VueJS, which now has an ES6 Module which can be pulled in just like my own modules. Rollup does some treeshaking on it, but I don't know if that is a very good idea? I don't know what it is doing, so I would rather it does nothing!
Instead I just add vue at the end of my HTML:
<script src="dist/bundle.js"></script>
I love the convenience of having everything as one bundled file, but should I really treeshake the entire Vue app, is there a command in Rollup that I can not treeshake just this one module?
EDIT
I have found the --external option, which seems good as it would just keep the import for vue and bundle the rest, but it does not seem to work!
When I use rollup --format=iife --external=../node_modules/vue/dist/vue.esm.browser.js --file=dist/bundle.js -- src/main.js it says Error: Could not resolve '../node_modules/vue/dist/vue.esm.browser.js' from src/app.js.
In my main.js it has import Vue from '../node_modules/vue/dist/vue.esm.browser.js; which works fine for the app. I want to make Vue an external, but it won't work!
To prevent Rollup from treeshaking a particular module, you can simply import it blindly (instead of a part of it), so that Rollup thinks the module performs some side effect:
import 'vue'
Of course you can still import some bits in parallel, so that you can rename the default export for example:
import 'vue'
import Vue from 'vue'
As for your --external option, you probably just need to wrap the path value with quotes:
--external='../node_modules/vue/dist/vue.esm.browser.js'
Note that you should probably switch to Rollup configuration file (instead of CLI options) to make your life easier. You will also be able to use rollup plugins, e.g. rollup-plugin-alias to manage the exact location of the Vue file you want to use.
I have bunch of Angular modules written in JavaScript and would like to import them into TypeScript. I tried using import and require, but it doesn't find my angular module since import checks for TypeScript Modules only.
import myModule= require('myModule');
Is there any other way to do this instead of converting my Js in TypeScript?
You cannot use modules defined using angular.module('my', []) directly from TypeScript. Such notation is used just to register a module inside internal angularJS object.
From good code prospective you have to redesign your angular modules to TypeScript/CommonJS/AMD modules and re-use them in your angular application.
But you can go another way:
create a hidden div element.
bootstrap an angular module you want to import on this div element. Here is link to angularJS documentation which may be helpful.
use next snippet to use service or whatewer else registered in your module: angular.element(document.getElementById('myhiddendiv')).injector.invoke(function(YourService: any) { YouService.doDirtyJob(); }).
But I would recommend to go with the first option.
The import module looks for JS files too...
import $Module = require("myModule");
This should work fine! In TypeScript you call the module with '$' and use it like:
$Module.createdWhateverFunctionYouMade(parameters);
In this case 'myModule' is the Javascript file.