I'm developing a project using font-awesome and HarpJS. I'm just using the pre-compiled CSS version of font-awesome, but since I'm using bower it downloads even the LESS files to my components folder.
The problem is, when I need to compile my assets to a dist folder with harp compile, it gives me this error:
{
"source": "Less",
"dest": "CSS",
"filename": "/Users/***/lib/fontawesome/less/bordered-pulled.less",
"lineno": 4,
"name": "NameError",
"message": "variable #fa-css-prefix is undefined",
"stack": "// Bordered & Pulled\n// -------------------------\n\n.#{fa-css-prefix}-border {\n padding: .2em .25em .15em;\n border: solid .08em #fa-border-color;\n border-radius: .1em;\n}\n\n.pull-right { float: right; }\n.pull-left { float: left; }\n\n.#{fa-css-prefix} {\n &.pull-left { margin-right: .3em; }\n &.pull-right { margin-left: .3em; }\n}\n"
}
This error is happening because HarpJS is trying to compile the LESS files that came with the font-awesome's bower package. After some research, I found this answer, which points me to a page of the font-awesome documentation that says:
Page: http://fontawesome.io/get-started/#custom-less
Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the #fa-font-path or $fa-font-path variable to point to your font directory.
Example:
#fa-font-path: "../font";
But I can't edit any file like this, since my dependencies are installed using bower and I don't check them in the repo. Even if I did check them in, that change would be overriden as soon as someone uses bower install to get an updated version of font-awesome.
What workaround would you use for this situation?
TIP: You can reproduce this just by doing:
$ mkdir test
$ cd test
$ bower init
$ bower install --save font-awesome
$ harp compile . dist
I just did some research around this issue and I believe the easiest way to fix this issue is by specifying a custom bower_components directory.
Found in this answer a way to do just that:
Create a file .bowerrc in the project root with the content:
{
"directory" : "_bower_components"
}
Run bower install again.
Harp doesn't compile directories/files that start with underscore (_), so if you name the directory _bower_components, it will successfully ignore it.
The problem with this approach is that those files will not be public, so you might have to create a new public file that imports the file(s) from font-awesome.
Something like:
#import "_bower_components/font-awesome/css/font-awesome.css"
There's a ticket open in harp’s issues where they're trying to find a way to ignore files or directories (similar to .gitignore), but it hasn't been implemented yet.
You might still have to figure out what to do with the font files. Hope it helps in any way to move you forward.
Related
I make a vue project using this documentation: https://vuejs.org/guide/quick-start.html#creating-a-vue-application
And I wanted to added tailwind css to this project. So I used this guide (from point 2 Install Tailwind CSS): https://tailwindcss.com/docs/guides/vite#vue
But, I see no changes and get this warning:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
I followed the instuction as it is.
I tried following the content-configuration and I double checked it to see all files in place.
I was expecting tailwind.config.cjs file should be generated but instead tailwind.config.js is generated.
Updates:
On repeating all the steps using this link: https://tailwindcss.com/docs/guides/vite#vue
At step 4:
Add the Tailwind directives to your CSS, When I replace the content for style.css as asked in the step.. Exactly after this point, the error is shown.
Fixed.. Asking in the discord community this was the response:
Thank you for supplying a remotely-hosted repository. It seems to work
fine for me, it could be that you're suffering from a bug that this PR
solves: https://github.com/tailwindlabs/tailwindcss/pull/9650. You
could temporarily try insiders version and see if that fixes it for
you
npm install tailwindcss#insiders
I just gave solution to the same problem. You might have the same...
I had my tailwind.config.js like this:
module.exports = {
content: ["./src**/**/*.{html,js}"],
},
...and I changed the destination folder from "src" to "public", and it worked for me.
Like this:
module.exports = {
content: ["./public/**/*.{html,js}"],
},
Hope this will help you. Good luck and happy coding !
first time asking a question here, so I apologize if this is incorrect - I'll get better!
I'm following along with a Vue.js tutorial, and am trying to install and call Bulma via an "#import '../node_modules/bulma/bulma.sass' file.
I'm able to view my vue "home" page, but once I add a "lang=sass" to my style tag, I keep getting the following error:
"Failed to compile.
./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!../node_modules/sass-loader/dist/cjs.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: TypeError: this.getOptions is not a function
at Object.loader (/Users/Dave/compare-vue/node_modules/sass-loader/dist/index.js:25:24)
#
./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!../node_modules/sass-loader/dist/cjs.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
4:14-384 13:3-17:5 14:22-392 # ./src/App.vue # ./src/main.js #multi (webpack)-dev-server/client?http://localhost:8080
webpack/hot/dev-server ./src/main.js"
Here is the code from my "app.vue" page:
<template>
<div id="app">
<img src="./assets/logo.png" />
<router-view />
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style lang="sass">
#import '../node_modules/bulma/bulma.sass'
#app
font-family: "Avenir", Helvetica, Arial, sans-serif
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-align: center
color: #2c3e50
margin-top: 60px
</style>
If I remove the "style" tag, the page loads and displays correctly, but then any changes I make on my styles.scss page obviously don't take effect as I belive I haven't called the SASS language.
I'm currently running node v 14.15.4 and npm v 6.14.10. I've tried everything I can see, from adjusting the package.json, etc. I can't contact the creator of the tutorial, and I really can't figure out anything else to do for the life of me. I would appreciate any help.
Vue-CLI sets up your project with CSS support out of the box, but requires an extra step for Sass. Looks like you still need to install the sass preprocessor:
npm install -D sass-loader sass
Look here for more info:
https://cli.vuejs.org/guide/css.html#pre-processors
If you're having issues with the sass-loader with vuejs on a mac...
I tried following this guide: https://vue-loader.vuejs.org/guide/pre-processors.html - had issues with uncompatible webpack packages
Saw that they supported different versions of node on a mac so fixed it like this
Dropped node to version 15 using n package
n 15
Installed sass-loader v 10.0.5
npm install -D sass-loader#10.0.5 node-sass
Checked that <script lang="scss"> was added to the App.vue file
yarn serve now works as expected and creates a css file from sass
This might change as new versions of the packages become available.
** There might be better ways to change node versions (please comment)
I am trying to load FontAwesome using SASS by #importing it using this line:
#import "../node_modules/font-awesome/scss/font-awesome";
and keep getting these errors in the console and not getting the FA icons to load:
olympos.min.js?ver=1.0:1 GET
http://test.dev/wp-content/themes/fonts/fontawesome-webfont.woff2?v=4.7.0
net::ERR_ABORTED (anonymous) # olympos.min.js?ver=1.0:1 (anonymous) #
olympos.min.js?ver=1.0:1 (anonymous) # olympos.min.js?ver=1.0:1
(index):1 GET
http://test.dev/wp-content/themes/fonts/fontawesome-webfont.woff?v=4.7.0
net::ERR_ABORTED
(index):1 GET
http://test.dev/wp-content/themes/fonts/fontawesome-webfont.ttf?v=4.7.0
net::ERR_ABORTED
I have tried following the original documentation on FontAwesomes website and results were similar - I have changed the file node_modules/font-awesome/scss/_variables.scss variable: $fa-font-path: "../fonts" !default; but noticed that it is pointing to the correct /fonts folder including the fonts.
Tried loading it from my gulpfile.js by adding font-awesome.scss to my sass task and not from within my projects scss _fonts.scss file.
this is my current local _fonts.scss file after a few variations:
#import "../node_modules/font-awesome/scss/font-awesome";
$fa-font-path: "../node_modules/font-awesome/fonts" !default;
#import "../node_modules/font-awesome/scss/font-awesome.scss";
#font-face {
font-family: 'FontAwesome';
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
After reviewing this post How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?
I get no proper result.
I came accross this post: "NetworkError: 404 Not Found fontawesome-webfont.woff?v=4.0.3
... mentioning it might be an Apache2 server fix (which I'm not quite sure where to add the code part... to my etc/apache2/sites-available/test.conf?)
I haven't tested this option yet, but the thing is - if this works locally on my localhost, this might be a problem to apply this change to my clients page (the production website is hosted on a server where I cant change anything in the apache configurations - due to a bad hosting company service).
Is there an other solution for this? Maybe adding this code part (or any other) to the .htaccess file?
What are the possible solutions for this case?
Using Ubuntu 16.04 - gulp - SASS - NPM
Feel free to request any more information that might help you help my and i will update my post
Why not just use the CDN for FontAwesome? You dont have to do any of that stuff. Just give them your email and they send the link to you.
Font Awesome cdn
I'm trying to include Bootstrap in my Aurelia CLI project, and the CSS and JS work fine.
The only problem I have is the glyphicons require font files to be loaded.
I use this configuration:
"dependencies": [
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.min.css",
"fonts/glyphicons-halflings-regular.woff2"
]
}
]
But I get an error containing this line:
path: 'C:\Users\randy\Documents\form\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.js'
So even though I include the .woff2 file, Aurelia tries to import the file as a JS file. What can I do to make this work? CSS does work fine.
It looks like this is a bug in the current version of the Aurelia CLI. I've submitted an issue for you here: https://github.com/aurelia/cli/issues/248
Aurelia can't process font files. You must use manual bundle task for it.
Here is similar solution for font-awesome: https://stackoverflow.com/a/39544587/1276632
Here is solution for glyphicons (I used it for bootstrap v4 integration): https://github.com/aurelia/cli/issues/248#issuecomment-250967074
This has been solved, for more information read the Github issue.
This issue can now be solved by adding a copy instruction in the aurelia.json.
aurelia.json - valid if the project was created by aurelia-cli 0.25.0 or greater
Add the following in the build block:
"bundles": [ ... ],
"copyFiles": {
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "bootstrap/fonts"
}
If the project was created by an older CLI version, you will have to create the copy task inside the tasks folder
https://github.com/aurelia/cli/blob/master/lib/resources/tasks/copy-files.js.
After that, call the copy task in the build.js/ts task
https://github.com/aurelia/cli/blob/master/lib/resources/tasks/build.js#L15
* credits to fabioluz for commenting this on github
I'm fairly new in Elm. It's interesting to see a functional language which allows you to develop front-end stuff. Now even if I am following the steps described here nicely, I still have problems with modules.
The code is
module Main where
import Html exposing ( Html )
import Signal
main : Signal Html.Html
main = Html.text "This should work."
|> Signal.constant
I have used elm-reactor -a='localhost' to be able to view my output. But I am getting an error, that module 'HTML' cannot be found:
I cannot find find module 'Html'.
Module 'Main' is trying to import it.
Potential problems could be:
* Misspelled the module name
* Need to add a source directory or new dependency to elm-package.json
(note the double "find" hehe)
The fix suggestion didn't help me. Or it could be that I'm not understanding the use of the .json file correctly.
elm-package.json:
{
"version": "1.0.0",
"summary": "testing elm",
"license": "BSD3",
"source-directories": [
".",
"./bin/"
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "3.0.0 <= v < 4.0.0"
},
"elm-version": "0.16.0 <= v < 0.17.0"
}
Here is a screenshot of my file tree.
Maybe it behaves differently than how Haskell is threatening the modules.
How can I solve this - eh simple? - problem.
Or is my elm-package.json just configured incorrectly?
Update for Elm 0.17
In 0.17, the Html package has been moved to elm-lang/html. Run the following command from the terminal to install it:
elm package install elm-lang/html
You should also remove the evancz/elm-html package from elm-package.json because it no longer exists as of 0.17.
For more information about the upgrading from 0.16 to 0.17, please see the 0.17 announcement.
Original Answer for Elm 0.16
Your elm-package.json configuration is missing the evancz/elm-html package, which exposes Html. You can use elm's package manager to install dependencies rather than editing elm-package.json directly.
From the terminal, type the following:
elm package install evancz/elm-html
You will also be prompted to install a few other missing dependencies required by evancz/elm-html. Running this command will update your elm-package.json file as well as pull down the missing packages from the internet and install them in the standard elm-stuff/packages directory.
More info on the elm-package tool can be found here.
You can browse elm packages online at package.elm-lang.org. The sidebar has a Popular Packages section which contains the evancz/elm-html package mentioned here.