Why does css get installed when I run npm install [someLibraryName]? - css

When I run this command...
npm install vue-material
It seemed to install and override some css in my application causing css conflicts. I had to search and find the exact piece of css and override it directly on the specific vue component's section.
Is there anyway to prevent this from happening when installnig NPM packages?
Technologies uses:
vue.js
webpack
material-vue

I believe I found out what I was looking for thank you #ljubadr for your help.
In the recommended Getting Started vue material guide it states you can:
import 'vue-material/dist/vue-material.min.css'
However, if you only need one component, this should work for a specific CSS need on a specific vue component:
import 'vue-material/dist/Components/MdCard/index.css'

Related

error deploying react project with font-awesome import

I'm trying to npm run deploy on my project where I'm storing the minified font-awesome css file and I'm getting the following error:
Creating an optimized production build...
Failed to compile.
./src/assets/css/font-awesome.all.min.css
ParserError: Syntax Error at line: 1, column 30
The app works fine on development sever.
The error shows whether I'm importing the css to the main css file or the main js file.
I only found some related old posts with potential solutions for a next.js project and yarn like in this link: https://github.com/vercel/next-plugins/issues/310
This is a react project and I'm using npm.
Any suggestions?
Can't comment on this unless there's more information regarding module-bundler and what is the configuration for the same. As it's treated differently according to module-bundler.
I would suggest you to use official package of fontawesome for react #fortawesome/react-fontawesome
PS. Module Bundler configuration should not be changed without proper knowledge as it can make whole application crash.

WebStorm doesn't recognize webpack css import from npm package export

I updated some webpack stuff and now they expect imports using the npm packages exports.
New syntax is:
Old syntax:
It is expecting you to use imports from the swiper node modules package.json export field here:
Question:
How to get WebStorm/PhpStorm to recognize this?
Package exports are not yet supported in CSS/SASS, please vote for WEB-55017 to be notified on any progress with this feature

Can we use npm package using symfony Encore

Hi I was wondering if we could use npm packages in the Symfony replacements... And if it's possible you can tell me how please
You can create all of frontend things in your public folder (for explain (/public/frontend/), init the npm, Webpack (if you want), and require generated CSS and JS files, in your base.html.twig template.
As you can see on the documentation Symfony documentation.
You can use npm or yarn which is similar but a still little bit different When to use Yarn over NPM? What are the differences?

How to manage packages in Meteor.js?

I couldn't find a clear answer for this anywhere so here it is. Instead of constantly doing
meteor add <package-name>
whenever I want to install a new package. Or instead of creating a bash script that adds and removes all of the packages, it would be nice if there was a more elegant way of doing this. Kind of like packages.json files for npm.
There is .meteor/packages (all meteor add <package-name> does is adding a line in this file)
Additionally, Meteor now supports npm packages directly (since the 1.3 release) and I'd recommend using them for anything that is not particularly related to Meteor. For that you use traditional the npm flow, ie a package.json at the root and npm install
Then in your scripts, you'd do
import {ReactMeteorData} from 'meteor/react-meteor-data';
to import from the Meteor react-meteor-data package, and
import React, {Component} from 'react'; to import from the npm react package.
Having to write here, as it wont allow to comment, yet.
I am on Ubuntu and my packages are at
~/.meteor/packages/<distribution>/<version>/<target(web.browser || web.cordova)

how to provide tether/anything-else globally in my meteor1.3 typescript project?

I'm hardly trying to get my existing ng2-prototype running in a meteor1.3 setup. So far i was building the prototype with webpack, and there is a provide plugin to make things like jQuery or Tether available during module building:
plugins: [
new ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.Tether": "tether"
})
]
As you can see, i did the same with "tether", since it's still the lib needed by bootstrap 4 alpha.
Now i'm wondering how i could achieve the same in my meteor1.3 project..? As written in the changelogs of the package "angular2-meteor", it is using webpack under the hood now to build everything.
angular2-meteor changelog
So, it should be possible to use the same provide plugin again in meteor1.3, right? But... how?
From the github issue threads of "angular2-meteor":
there are multiple ways: you could install https://atmospherejs.com/coursierprive/tether, or,
since Meteor 1.3 prefers NPM now, you could install Tether NPM and require it before you use bootstrap 4, or, if you want more control and modularity, you could create own local package (in the packages folder) with all dependencies (added from NPMs) you need including Tether (similar to the way angular2-runtime done in this repo).
i will try this out and i'm already sure this will do the trick :) many thx #barbatus ;)
Update:
Ok i'm going with the npm package solution, i had tether installed already. If you don't have it, do this first:
npm install --save tether
Now, the single require statement won't be enough.. bootstrap 4 which i'm trying to include completely is asking for a window.Tether function. So i ended up doing this:
let Tether = require('tether');
window.Tether = Tether;
// import all bootstrap javascript plugins
require('bootstrap');
Cool is, there is also a typings definition file for it now, just add it by running:
typings install --save --ambient tether
After adding it to the window global context, the errors are gone... but ok, the solution trough the webpack provide plugin feels still cleaner -> it will provide the Tether object for each module separately during build, so it won't end up living in the window global context after all. But i'm just lucky to have it running now :)
PS: jQuery is provided anyways by meteor, that's the reason it is already enough to get it running by just including tether alone.
Update: yeah jQuery is included by default - but it is just a package in your /.meteor/packages file ;)

Resources