Menu icon Foundation

My Posts





My Comments

Greg Brown commented on Greg Brown's post about 1 month

Michal,
Once again, you are very helpful!  That worked perfectly.  Also, because of your great help and explanations, I was able to figure out how to make Gulp copy my .php files in src/pages over to the dist folder as well.  I just added php to the code below in the gulpfile.
 
Thanks again!!!
// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/*/.{html,hbs,handlebars,php}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}

Greg Brown commented on Greg Brown's post about 1 month

YESSSSSS!!!  Finally, it is working thanks to you Michal!!!
I had everything correct except I was missing the line
- "!node_modules/font-awesome/{css,less,scss}/*/"
I have spent 2 days trying to figure this out.  You are a lifesaver.  I would have figured it our a lot earlier from one of your previous replies had it not been deleted as spam.
Thank you so much for your patience!!
Greg

Greg Brown commented on Greg Brown's post about 1 month

Ok, I think I am making some progress.  After a lot of trial and error based on what I have read and what Michal and Rafi stated, I have managed to get no errors when I run foundation watch.  However, the Font Awesome icons are still not working.
Upon looking into app.css it appears that they are being imported, but incorrectly.  For some reason, it looks like the css has no idea what the font unicode is.  They all look like this.
 
.fa-envelope-o:before {
  content: ""; }
 
.fa-heart:before {
  content: ""; }
 
.fa-star:before {
  content: ""; }
 
They display on the page with that same box.  What in the world am I doing wrong.  Here is what I did.
npm install font-awesome

config.yml

# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets//*"
- "!src/assets/{img,js,scss}/
/*"
- "node_modules/sweetalert2/src"
- "node_modules/font-awesome/fonts"
# Paths to Sass libraries, which can then be loaded with @import
sass:
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src"
- "node_modules/sweetalert2/src"
- "node_modules/font-awesome/scss"

app.scss

// import custom scss
@import "custom-styles";
@import 'sweetalert2';
@import 'font-awesome';

Greg Brown commented on Greg Brown's post about 1 month

I should also mention that, I did create the dependencies.js in src/assets/lib/dependencies.js
 
Nothing I try works.

Greg Brown commented on Greg Brown's post about 1 month

Ok, I went through your tutorial by installing SweetAlert2 and that worked fine.  However, I am not able to translate this to Font Awesome.  Below is the errors that were output from the terminal.
 
[20:07:58] Starting 'javascript'...
[20:08:02] 'javascript' errored after 3.88 s
[20:08:02] Error in plugin 'webpack-stream'
Message:
    ./src/assets/js/lib/dependencies.js
Module not found: Error: Can't resolve 'font-awesome-sass' in '/Users/browngd/dev/foundation/dashboard/src/assets/js/lib'
resolve 'font-awesome-sass' in '/Users/browngd/dev/foundation/dashboard/src/assets/js/lib'
  Parsed request is a module
  using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./src/assets/js/lib)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./src/assets/js/lib)
    resolve as module
      /Users/browngd/dev/foundation/dashboard/src/assets/js/lib/node_modules doesn't exist or is not a directory
      /Users/browngd/dev/foundation/dashboard/src/assets/js/node_modules doesn't exist or is not a directory
      /Users/browngd/dev/foundation/dashboard/src/assets/node_modules doesn't exist or is not a directory
      /Users/browngd/dev/foundation/dashboard/src/node_modules doesn't exist or is not a directory
      /Users/browngd/dev/foundation/node_modules doesn't exist or is not a directory
      /Users/browngd/dev/node_modules doesn't exist or is not a directory
      /Users/browngd/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/browngd/dev/foundation/dashboard/node_modules
        using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./node_modules)
          using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: .)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.json doesn't exist
            as directory
              existing directory
                using path: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index
                  using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: ./index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
                      /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
                      /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.json doesn't exist
                use ./index.js from main in package.json
                  using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: .)
                    Field 'browser' doesn't contain a valid alias configuration
                  after using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: .)
                    using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: ./index.js)
                      no extension
                        Field 'browser' doesn't contain a valid alias configuration
                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js doesn't exist
                      .js
                        Field 'browser' doesn't contain a valid alias configuration
                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.js doesn't exist
                      .json
                        Field 'browser' doesn't contain a valid alias configuration
                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.json doesn't exist
                      as directory
                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js doesn't exist
[/Users/browngd/dev/foundation/dashboard/src/assets/js/lib/node_modules]
[/Users/browngd/dev/foundation/dashboard/src/assets/js/node_modules]
[/Users/browngd/dev/foundation/dashboard/src/assets/node_modules]
[/Users/browngd/dev/foundation/dashboard/src/node_modules]
[/Users/browngd/dev/foundation/node_modules]
[/Users/browngd/dev/node_modules]
[/Users/browngd/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.js]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.json]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.json]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.js]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.json]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js]
 @ ./src/assets/js/lib/dependencies.js 3:23-51
 @ ./src/assets/js/app.js
 @ multi ./src/assets/js/app.js
Details:
    domain: [object Object]
    domainThrown: true
 

Greg Brown commented on Greg Brown's post about 1 month

Rafi,
I looked at the link provided but I don't have a lib folder.  Should I create this and if so, does it go in the root of the project or in the src folder?
 
Thanks,
Greg

Greg Brown commented on Greg Brown's post about 1 month

Thanks Michal,
I tried your method and it's not working for me.  When I start foundation watch it produces this error.
[BS] Serving files from: dist
Error in plugin 'sass'
Message:
src/assets/scss/app.scss
Error: File to import not found or unreadable: font-awesome
Parent style sheet: /Users/browngd/dev/foundation/dashboard/src/assets/scss/app.scss
on line 6 of src/assets/scss/app.scss
>> @import 'font-awesome';
^

It seems to be an issue with the path to  font awesome, but I can confirm that it is there,
Thanks,
Greg
 

Greg Brown commented on Greg Brown's post about 1 month

Michal,
Thanks for your response.  I am using Foundation 6.4.1.
Thanks again,
Greg

Greg Brown commented on Greg Brown's post about 1 month

Michal,
Thank you for your response.  I am running Foundation 6.4.1.
Thank you again,
Greg

Greg Brown commented on Greg Brown's post about 1 month

I am attaching a screenshot of the errors I get in my terminal when I try to run foundation watch.  I hope this may help in sorting out the issues.
Also, here is a bit more information that I can give.  When I add the import statement to app.scss the terminal throws and error that the file can not be found.  I have checked and rechecked the path and it is correct.
When I add to the config.yaml and gulpfile, the errors the terminal throws seems to be related to the gulpfile.  I am not at all familiar with the gulpfile and how it works.  I suspect I may have placed something out of order or something but I don't know how to fix.
Thanks!

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Greg Brown's post about 1 month

Michal,
Once again, you are very helpful!  That worked perfectly.  Also, because of your great help and explanations, I was able to figure out how to make Gulp copy my .php files in src/pages over to the dist folder as well.  I just added php to the code below in the gulpfile.
 
Thanks again!!!
// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/*/.{html,hbs,handlebars,php}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}

You commented on Greg Brown's post about 1 month

YESSSSSS!!!  Finally, it is working thanks to you Michal!!!
I had everything correct except I was missing the line
- "!node_modules/font-awesome/{css,less,scss}/*/"
I have spent 2 days trying to figure this out.  You are a lifesaver.  I would have figured it our a lot earlier from one of your previous replies had it not been deleted as spam.
Thank you so much for your patience!!
Greg

You commented on Greg Brown's post about 1 month

Ok, I think I am making some progress.  After a lot of trial and error based on what I have read and what Michal and Rafi stated, I have managed to get no errors when I run foundation watch.  However, the Font Awesome icons are still not working.
Upon looking into app.css it appears that they are being imported, but incorrectly.  For some reason, it looks like the css has no idea what the font unicode is.  They all look like this.
 
.fa-envelope-o:before {
  content: ""; }
 
.fa-heart:before {
  content: ""; }
 
.fa-star:before {
  content: ""; }
 
They display on the page with that same box.  What in the world am I doing wrong.  Here is what I did.
npm install font-awesome

config.yml

# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets//*"
- "!src/assets/{img,js,scss}/
/*"
- "node_modules/sweetalert2/src"
- "node_modules/font-awesome/fonts"
# Paths to Sass libraries, which can then be loaded with @import
sass:
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src"
- "node_modules/sweetalert2/src"
- "node_modules/font-awesome/scss"

app.scss

// import custom scss
@import "custom-styles";
@import 'sweetalert2';
@import 'font-awesome';

You commented on Greg Brown's post about 1 month

I should also mention that, I did create the dependencies.js in src/assets/lib/dependencies.js
 
Nothing I try works.

You commented on Greg Brown's post about 1 month

Ok, I went through your tutorial by installing SweetAlert2 and that worked fine.  However, I am not able to translate this to Font Awesome.  Below is the errors that were output from the terminal.
 
[20:07:58] Starting 'javascript'...
[20:08:02] 'javascript' errored after 3.88 s
[20:08:02] Error in plugin 'webpack-stream'
Message:
    ./src/assets/js/lib/dependencies.js
Module not found: Error: Can't resolve 'font-awesome-sass' in '/Users/browngd/dev/foundation/dashboard/src/assets/js/lib'
resolve 'font-awesome-sass' in '/Users/browngd/dev/foundation/dashboard/src/assets/js/lib'
  Parsed request is a module
  using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./src/assets/js/lib)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./src/assets/js/lib)
    resolve as module
      /Users/browngd/dev/foundation/dashboard/src/assets/js/lib/node_modules doesn't exist or is not a directory
      /Users/browngd/dev/foundation/dashboard/src/assets/js/node_modules doesn't exist or is not a directory
      /Users/browngd/dev/foundation/dashboard/src/assets/node_modules doesn't exist or is not a directory
      /Users/browngd/dev/foundation/dashboard/src/node_modules doesn't exist or is not a directory
      /Users/browngd/dev/foundation/node_modules doesn't exist or is not a directory
      /Users/browngd/dev/node_modules doesn't exist or is not a directory
      /Users/browngd/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/browngd/dev/foundation/dashboard/node_modules
        using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./node_modules)
          using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: .)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.json doesn't exist
            as directory
              existing directory
                using path: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index
                  using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: ./index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
                      /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
                      /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.json doesn't exist
                use ./index.js from main in package.json
                  using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: .)
                    Field 'browser' doesn't contain a valid alias configuration
                  after using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: .)
                    using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: ./index.js)
                      no extension
                        Field 'browser' doesn't contain a valid alias configuration
                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js doesn't exist
                      .js
                        Field 'browser' doesn't contain a valid alias configuration
                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.js doesn't exist
                      .json
                        Field 'browser' doesn't contain a valid alias configuration
                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.json doesn't exist
                      as directory
                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js doesn't exist
[/Users/browngd/dev/foundation/dashboard/src/assets/js/lib/node_modules]
[/Users/browngd/dev/foundation/dashboard/src/assets/js/node_modules]
[/Users/browngd/dev/foundation/dashboard/src/assets/node_modules]
[/Users/browngd/dev/foundation/dashboard/src/node_modules]
[/Users/browngd/dev/foundation/node_modules]
[/Users/browngd/dev/node_modules]
[/Users/browngd/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.js]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.json]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.json]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.js]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.json]
[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js]
 @ ./src/assets/js/lib/dependencies.js 3:23-51
 @ ./src/assets/js/app.js
 @ multi ./src/assets/js/app.js
Details:
    domain: [object Object]
    domainThrown: true
 

You commented on Greg Brown's post about 1 month

Rafi,
I looked at the link provided but I don't have a lib folder.  Should I create this and if so, does it go in the root of the project or in the src folder?
 
Thanks,
Greg

You commented on Greg Brown's post about 1 month

Thanks Michal,
I tried your method and it's not working for me.  When I start foundation watch it produces this error.
[BS] Serving files from: dist
Error in plugin 'sass'
Message:
src/assets/scss/app.scss
Error: File to import not found or unreadable: font-awesome
Parent style sheet: /Users/browngd/dev/foundation/dashboard/src/assets/scss/app.scss
on line 6 of src/assets/scss/app.scss
>> @import 'font-awesome';
^

It seems to be an issue with the path to  font awesome, but I can confirm that it is there,
Thanks,
Greg
 

You commented on Greg Brown's post about 1 month

Michal,
Thanks for your response.  I am using Foundation 6.4.1.
Thanks again,
Greg

You commented on Greg Brown's post about 1 month

Michal,
Thank you for your response.  I am running Foundation 6.4.1.
Thank you again,
Greg

You commented on Greg Brown's post about 1 month

I am attaching a screenshot of the errors I get in my terminal when I try to run foundation watch.  I hope this may help in sorting out the issues.
Also, here is a bit more information that I can give.  When I add the import statement to app.scss the terminal throws and error that the file can not be found.  I have checked and rechecked the path and it is correct.
When I add to the config.yaml and gulpfile, the errors the terminal throws seems to be related to the gulpfile.  I am not at all familiar with the gulpfile and how it works.  I suspect I may have placed something out of order or something but I don't know how to fix.
Thanks!

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content