Custom config not copying assets (font-awesome [scss])

Ionic Framework ionic-v3
1

Hi all,

I appear to be following instructions to copy assets into the build folder, but they never seem to get copied?

Does anybody else have this working with Ionic 3? I just seem to be going around in circles. I wa son the presumptions adding these values to my package.json would be inherited by the ionic cli when running commands?

package.json

...
"config": {
  "ionic_copy": "./config/copy.config.js",
  "ionic_sass": "./config/sass.config.js"
}

copy.config.js

const config = require('../node_modules/@ionic/app-scripts/config/copy.config');

module.exports = Object.assign(config, {
  copyFontAwesome: {
    src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  }
})

Error in build

...
[09:36:26]  sass: src/theme/variables.scss, line: 89
File to import not found or unreadable: font-awesome. Parent style sheet:
/Users/Createanet/Workspace/Swiftlocum/src/theme/variables.scss

L88:  $fa-font-path: $font-path;
L89:  @import "font-awesome";

If I ignore ionic serve and run the below it builds with no errors

npm run ionic:serve  --copy ./config/copy.config.js --sass ./config/sass.config.js

Ionic info


@ionic/cli-plugin-proxy : 1.5.6
@ionic/cli-utils        : 1.19.0
ionic (Ionic CLI)       : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.5
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.7.1

Thanks in advance

2

I do something like this

copy.config.js overwrite and add font-awesome in copyFonts array

module.exports = {
  copyAssets: {
    src: ['{{SRC}}/assets/**/*'],
    dest: '{{WWW}}/assets'
  },
  copyIndexContent: {
    src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
    dest: '{{WWW}}'
  },
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*', '{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyPolyfills: {
    src: [`{{ROOT}}/node_modules/ionic-angular/polyfills/${process.env.IONIC_POLYFILL_FILE_NAME}`],
dest: '{{BUILD}}'
  },
  copySwToolbox: {
    src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
    dest: '{{BUILD}}'
  }
}

sass.config.js overwrite just includePaths and add font-awesome

module.exports = {
includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',
    'node_modules/font-awesome/scss'
]
};

and then in app.component.scss

$fa-font-path: "../assets/fonts";
@import "font-awesome";
3

I tried this approach first and then an individual object as I know it does merge the properties into the original configs.

My configs are fine with all three approaches they work when I run the npm scripts, just not when running ionic serve/build or ionic cordova run - which is a problem, because attempting to run on a device fails because of sass build fails as a result of the files not being copied to the build folder.

What version of ionic and cli are you using?

4

I use everything up-to-date and didn’t had problems with it since months

I saw in you answer/post that you don’t have the ‘sass.config.js’ part, did you added/tried that too?

5

I deliberately left that part out, but yes it is all included :confused:

Just to confirm after adding the config data to your package.json and running ionic serve the files copy across for you?

Ive removed all files in my node_modules folder and updated but hasn’t made a difference.

Interestingly through, an older project running Ionic 2 seems to work fine and that doesn’t work any different other than the versions

Working

ionic-angular@3.6.0
ionic/app-scripts@2.1.3

Not working

ionic-angular@3.7.1
ionic/app-scripts@3.1.5
6

I mean like I said, I have this configuration since ages and it was always working aka when I get the app from the app store or google play, the font-awesome icons I used are correctly displayed in my app

right now I’ve got following libraries

“ionic-angular”: “^3.9.2"
”@ionic/app-scripts": “^3.1.5”

7

Is your app public? should/could I clone your repository to try?

8

Btw. I just removed my www (rm -r www) and tested this specially, could confirm that everything is ok like this for me with font-awesome

9

It turns out the problem was this reference in the sass file.

Updating this to use a different files for me. I didn’t think to check if the files had been copied over…

@import "node_modules/font-awesome/scss/font-awesome";

Im not 100% sure its resolve all my issues, but does resolve this issue with the build step.

I know me custom webpack.config.json is also setup in the package.json but doesn’t seem to be picked.

I thought the log in the terminal would report when it using custom files…

Thanks for your help @reedrichards. I’ll update the thread once I know some more.

10

Did you try to run a prod build too and to have a look if it works once deployed on real devices too? Like

 ionic cordova build ios --prod
 test on a phone

I’m always concern about referencing “directly” node_modules somewhere, like you did in

@import "node_modules/font-awesome/scss/font-awesome";

Just in case you never know. But glad to hear you found a solution :wink: