starred/flag-icons

Fork 0

mirror of https://github.com/lipis/flag-icons.git synced 2026-04-27 01:46:02 +03:00

[GH-ISSUE #586] Importing flag-icon.scss does not work #331

New issue

Closed

opened 2026-03-03 14:37:36 +03:00 by kerem · 5 comments

kerem commented

2026-03-03 14:37:36 +03:00

Owner

Originally created by @cpxPratik on GitHub (Aug 7, 2019).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/586

When importing flag-icon-css/sass/flag-icon.scss with @import '~flag-icon-css/sass/flag-icon.scss';, following errors occurs. Paths to flags assets are taken relatively and are not found.

make build
>>> Building app for production
yarn run build
yarn run v1.17.3
$ vue-cli-service build

⠧  Building for production...

 ERROR  Failed to compile with 1 errors  
 error  in ./src/assets/scss/app.scss

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../flags/1x1/ad.svg' in '/home/user1/projects/project1/app/src/assets/scss'

Originally created by @cpxPratik on GitHub (Aug 7, 2019). Original GitHub issue: https://github.com/lipis/flag-icons/issues/586 When importing `flag-icon-css/sass/flag-icon.scss` with `@import '~flag-icon-css/sass/flag-icon.scss';`, following errors occurs. Paths to flags assets are taken relatively and are not found. ``` make build >>> Building app for production yarn run build yarn run v1.17.3 $ vue-cli-service build ⠧ Building for production... ERROR Failed to compile with 1 errors error in ./src/assets/scss/app.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleNotFoundError: Module not found: Error: Can't resolve '../flags/1x1/ad.svg' in '/home/user1/projects/project1/app/src/assets/scss' ```

kerem closed this issue

2026-03-03 14:37:37 +03:00

kerem commented

2026-03-03 14:37:37 +03:00

Author

Owner

@pierreneter commented on GitHub (Aug 21, 2019):

Does vue-cli-service support svg files?

@pierreneter commented on GitHub (Aug 21, 2019): Does `vue-cli-service` support `svg` files?

kerem commented

2026-03-03 14:37:37 +03:00

Author

Owner

@rip3rs commented on GitHub (Sep 30, 2019):

It's a question of relative paths, within the import.

It's trying to search a node_module import on the folder of the project. (or am I missing something?)

@rip3rs commented on GitHub (Sep 30, 2019): It's a question of relative paths, within the import. It's trying to search a node_module import on the folder of the project. (or am I missing something?)

kerem commented

2026-03-03 14:37:37 +03:00

Author

Owner

@St-Ex commented on GitHub (Oct 4, 2019):

TL;DR

$flag-icon-css-path: '~flag-icon-css/flags';
$include: gb, fr;
@import '~flag-icon-css/sass/flag-icon';

Explanation

$flag-icon-css-path: '~flag-icon-css/flags';

It's possible to change the path of css loading in variables.scss

$include: gb, fr;

Then I'll load only the flag I need. Again thanks to a variable

@St-Ex commented on GitHub (Oct 4, 2019): **TL;DR** ```js $flag-icon-css-path: '~flag-icon-css/flags'; $include: gb, fr; @import '~flag-icon-css/sass/flag-icon'; ``` **Explanation** ```scss $flag-icon-css-path: '~flag-icon-css/flags'; ``` It's possible to change the path of css loading in [variables.scss](https://github.com/lipis/flag-icon-css/blob/95baf495fee1ae3575915d1f689d8f7bf35ffb1c/sass/_variables.scss#L1) ```scss $include: gb, fr; ``` Then I'll load only the flag I need. Again thanks to a [variable](https://github.com/lipis/flag-icon-css/blob/95baf495fee1ae3575915d1f689d8f7bf35ffb1c/sass/_flag-icon-list.scss#L1)

kerem commented

2026-03-03 14:37:38 +03:00

Author

Owner

@vladkasianenko commented on GitHub (Oct 27, 2019):

Well, yeah, as workaround, just change the path like this in your styles.scss:

...
$flag-icon-css-path: '~flag-icon-css/flags';
@import '~flag-icon-css/sass/flag-icon.scss'
...

@vladkasianenko commented on GitHub (Oct 27, 2019): Well, yeah, as workaround, just change the path like this in your `styles.scss`: ``` ... $flag-icon-css-path: '~flag-icon-css/flags'; @import '~flag-icon-css/sass/flag-icon.scss' ... ```

kerem commented

2026-03-03 14:37:38 +03:00

Author

Owner

@zeroinformatique commented on GitHub (Jul 2, 2020):

Sorry to reopen this issue, but I feel this should be on the front page's documentation.
I had to scan the issues to find a way to do this.

@zeroinformatique commented on GitHub (Jul 2, 2020): Sorry to reopen this issue, but I feel this should be on the front page's documentation. I had to scan the issues to find a way to do this.