Install package:
npm install font-awesome --save
Update aurelia.json:
{
"name": "font-awesome",
"main":"",
"path": "../node_modules/font-awesome",
"resources": [
"css/font-awesome.css",
"/fonts/fontawesome-webfont.woff2",
"/fonts/FontAwesome.otf",
"/fonts/fontawesome-webfont.eot",
"/fonts/fontawesome-webfont.svg",
"/fonts/fontawesome-webfont.ttf"
]
}
Import style in html page using require tag:
<require from="font-awesome/css/font-awesome.css"></require>
No errors - Working as intended
Import style using less and aurelia.config path (not working)
#import (less) "font-awesome/css/font-awesome.css";
Error: not found - Doesn't find file when using import less in master less file.
Import style using less and full node_modules path (working)
#import (less) "node_modules/font-awesome/css/font-awesome.css";
No errors - Working as intended
Why doesn't import less find my file?
It's working fine when using full path to css file, but I read that you should avoid using full paths, correct? Why is that?
Perhaps I should include .less instead in my aurelia.json config?
If I use the full node_modules path and publish my projects, will I have any problems loading the library?
When you updated the aurelia.json file, you are basically saying "name": "font-awesome" is in "path": "../node_modules/font-awesome", so
<require from="font-awesome/css/font-awesome.css"></require> works because Aurelia knows where font-awesome is placed (like an alias).
But, with #import (less) "font-awesome/css/font-awesome.css"; , you cant find the file because less doesn't know the alias.
#import (less) "node_modules/font-awesome/css/font-awesome.css"; works because this is the real path where font-awesome is placed.
Actually, node_modules/font-awesome/css/font-awesome.css is relative to your current place, full path example is /var/www/project/node_modules/.., and this is bad because when you move your project to another place, this path could be wrong.
No need.
No problem with that, less will copy font-awesome.css contents inside this file (that's what import does).
Hope it helps.
Related
I am trying to include gsap into a JavaScript file and even it being very straight forward it will not load. I am using what GreenSock docs say to do and still no luck. I have added "type": "module" in the json file and the script file I am import into. In my HTML has type="module included and I have a class module already imported into it. It is working fine.
After doing a npm install gsap and it is in my .json file "gsap": "^3.11.0"
They say include this at the very top of the file using it: import {gsap} from "gsap"
Doing so only throws a console error:
Uncaught TypeError: Failed to resolve module specifier "gsap". Relative references must start with either "/", "./", or "../".
I didn't include any of those being it is a npm install not a cdn script, then on a whim I did try to include any one of those and still nothing. But the error now reads:
GET ###url####ERR_ABORTED 404 (Not Found) looking for a file in my directory. With npm install there is no file just a node_module.
Will just go to the cdn version but just wondering why this is a problem? I am using a tutorial and even the npm isntall steps he uses worked. But when I try it fails .... included image and with or with a " ./ " director included nothing loads
If anyone has any advice feel free to include it here. Removed via npm remove gsap and included the cdn in my html. It is 2022 and shouldn't have to be this hard .....
I just needed to put the cdn in the html and gsap worked perfectly in the js file
CDN - <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
I am trying to add a paintworklet to my application, but I am having a really hard time.
The worklet is a npm dependency, but worklets can't be inlined, they need to be registered like so:
CSS.paintWorklet.addModule('url/to/module.js');
I am having a hard time, because even though that currently works in my application, I am not sure if this is the right way to go about it, or if it will work in production. Currently, my url points to a file inside node_modules and I am not sure if nuxt will do anything with this.
I am currently doing this with a .client.js file inside the plugins folder. But they need an export default function(), but the worklet code does not have an export.
What I am currently trying to do, is tell nuxt somehow to grab certain files from node_modules and serve them as assets somehow, and then reference them some other way. But I cannot find any resources on this.
Any ideas would be appreciated.
If the file path is specified in a literal string, containing node_modules, the paint worklet might appear to work in development mode, but the worklet file will not be bundled in the build output:
CSS.paintWorklet.addModule('./node_modules/extra-scalloped-border/worklet.js')
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
❌ file not bundled in build output
Solution: Import the file
Importing a file enables the bundler to track the file, and include it in the build output. Nuxt 3 uses Vite by default, and the Vite docs describe how to import the file to use with paint worklets:
Explicit URL Imports
Assets that are not included in the internal list or in assetsInclude, can be explicitly imported as an URL using the ?url suffix. This is useful, for example, to import Houdini Paint Worklets.
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)
Since the CSS.paintWorklet API is only available in the browser, make sure to use this in the mounted() hook, which only occurs client-side:
import workletURL from 'extra-scalloped-border/worklet.js?url'
export default {
mounted() {
CSS.paintWorklet.addModule(workletURL)
}
}
demo
I am trying to install https://github.com/SteveDunlap13/MaterialTimeControl under Angular 6. The installation succeeds without errors but I still cannot import the MaterialTimeControlModule.
All I can see is in my node_modules/ this is the only directory which is not marked as "orange" so I guess that means there's something wrong?
What am I missing here or could this be due to my recent update from Angular 5 to Angular 6?
As you write in comments under your question:
I am following this stackblitz example. I add it to my imports in my
app.module.ts
As you can see, in that example,in app.module.ts there is import MaterialTimeControlModule from.... SRC directory (not node_modules) !
This mean that you should create similar materia-time-control.module.ts file in your SRC directory and import it in app.module.ts in similar way. You probably should also create similar src/time-control directory (may be with som local changes depend on your particular project).
I am using laravel5.4 with vuejs2 to build a small project. I have just started learning vuejs2 with laravel. Using laravel-mix to compile my assets. In laravel-mix documentation i can't seem to find a way to add my own plain css file to be merged and watched.
I have my own css rules in public/css/custome.css file. what should i write in the webpack.mix.js file so that my this file is included and watched by laravel mix? Currently i have below lines in the file:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Move your custom CSS file into resources/css folder and write the configuration below in webpack.mix.js
Note: You probably won't have a css folder in resources, so just create one.
mix.styles([
'resources/css/custom.css'
], 'public/css')
I found a solution on Laracast and it worked for me.
Here are the steps :
Save the content of public/css/custome.css in resources/assets/sass/_custome.scss
You have to change the file extension to .scss and add an underscore at the beginning.
The underscore will be useful when importing in your main app.scss file.
Import your resources/assets/sass/_custome.scss file into your resources/assets/sass/app.scss this way :
/* importing _custome.scss from the same directory containing the following files
resources/assets/sass/{app.scss, _custome.scss, _variables.scss} */
// import _custome.scss
#import "custome";
// import _variables.scss (custom variables for bootstrap-sass)
#import "variables";
// importing bootstrap-sass from node modules (if you are using bootstrap)
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
Include this in your webpack.mix.js file
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Compile with
npm run dev
That's all.
I'm trying to include some CSS in my create-react-app project. The CSS is from a 3rd party NPM package and therefore its in the node_modules directory.
I tried:
import '/node_modules/packagename/css/styles.css';
But I get the error:
Module not found: You attempted to import /node_modules/packagename/css/styles.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.
I would prefer to not move the CSS to src/ so it can be updated via NPM. I could symlink but as I develop on windows and deploy to linux this isn't ideal.
What's the best way from me to include the CSS?
Find the path of the css file
example: ./node_modules/packagename/dist/css/styles.css
Import using the path related to node_modules (anything after node_modules/ )
import 'packagename/dist/css/styles.css'
relative paths are unnecessary from node_modules and should not be the recommended way to include the css
all you have to do is leave off the preceding slash and node_modules directory same as importing a js package from node modules:
import 'package/css/style-to-import.css'
when using (s)css imports, use the tilde (~) to indicate an absolute import:
#import '~package/css/style-to-import.css'
A distinction not made from the previous answers is it depends on where you're importing the CSS into; a component or into a stylesheet.
If you're importing a node_modules stylesheet into a component, you don't need a relative path like mentioned above.
import 'packagename/dist/css/styles.css'
However, if you're importing a node_modules stylesheet into a CSS/SCSS file, you need to use tilde ~.
#import '~packagename/dist/css/styles.css'
I found this a bug of a pain. specially my webpack.config.js is not running anymore.
specially react app is now running in src folder and the import files need to be in the public folder.
i was using materialize-social and found out the easiest way is to move node_module file folder "materialize-social" to the public directory any other way please commend it down.