Error importing sass files - nativescript

I am having an issue trying to import SCSS files in my Nativescript app. I am adding these lines to add my default theme styles in my app, the lines are added in the app.android.scss and app.ios.scss:
#import '~/assets/skin';
#import '~/assets/list';
The files are inside app/assets folder and their real names are: _skin.scss and _list.scss.
The problem is when I try to use Nativescript Sidekick and build for iOS in the cloud it gives me this error:
Found peer node-sass
[17-10-25 13:55:16.820] (Info) Error: It's not clear which file to import for '#import \"assets/skin\"'.
[17-10-25 13:55:16.822] (Info) Candidates:
[17-10-25 13:55:16.823] (Info) assets/_skin.scss
[17-10-25 13:55:16.825] (Info) assets/skin.css
But building the app for android locally it works.
Any suggestion?
Thanks!

Related

Where is the location for sweetalert2?

I am having a hard time installing the swwetalert2 package.
npm i sweetalert2 - its fine.
the package is inside node_modules.
inside my app.css i tried different variation of the #import
#import '/sweetalert2';
#import '~sweetalert2';
#import 'sweetalert2/dist';
but every time I run npm run dev or production I get this:
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'sweetalert2'
no matter the variation I use for the location.

Laravel-Mix Font-awesome can't installed properly with npm

I have installed font-awesome with npm with following command :
npm install font-awesome --save
And then i have add following line in app.scss
#import "~font-awesome/scss/font-awesome";
Then i have run npm run watch
I have checked manually font-awesome folder is there inside the node_modules directory.
But in my webpage icon not displayed and in console i have seen following Error
GET
http://localhost/fonts/vendor/font-awesome/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e
net::ERR_ABORTED GET
How do i resolve the issue?
Since your are using Laravel, you need to write the following line in resources/asset/sass/_variables.scss:
$fa-font-path: "~font-awesome/fonts/";
Now in your resources/assets/sass/app.scss, write:
#import "~font-awesome/scss/font-awesome";

Redefinition of ... Errors in RCTLog.h after linking RNVectorIcons in a React Native project

After running the command react-native link react-native-vector-icons I now get a bunch of Redefintion of ... errors in RCTLog.h in RNVectorIcons (it has a little column house icon, is that a library?) errors in Xcode in my react native project. How do I fix these build errors - I tried react-native unlink react-native-vector-icons but that errors ERR! It seems something went wrong while unlinking. Error: Cannot read property 'config' of undefined so it looks like I have to fix this manually.
For context I was trying to work around the font not found errors from using #shoutem/ui with react native.
https://github.com/shoutem/ui/issues/95
Found the answer in this response to an issue in github https://github.com/shoutem/ui/issues/134
Looks like the link command for shoutem/ui and vector icons was not updated for react 0.40. You have to manually change the import statements in the libraries for BVLinearGradient... from
#import "RCTBridge.h"
#import "RCTViewManager.h"
#import "RCTView.h"
to this
#import <React/RCTBridge.h>
#import <React/RCTViewManager.h>
#import <React/RCTView.h>

Foundation Sass Install App.css error

Followed the instructions to download the sass Foundation version. (http://foundation.zurb.com/docs/sass.html)
I keep getting the following error in app.css
Syntax error: File to import not found or unreadable: foundation/_functions.
Load path: /Users/xxx/Desktop/sandbox/app
on line 13 of scss/_settings.scss
from line 1 of ./scss/app.scss
Any ideas?
Inside of the foundation folder there should be a file named _functions. The underscore in front of the name indicates that it's a partial file and is compiled into app.css using #import.
1: Check to see if _functions is in the foundation folder
2: If it is, check your import path
3: If it's not, try downloading Foundation again
Just as a tip, I like to use a app called Mixture.io. In addition to having a lots of its own features, it makes setting up a Foundation project a cinch.
Hope this helps.

Foundation file to import not found or unreadable

Using the new Yeoman beta 1.0
I bootstrapped an angular application, and installed foundation via bower.
When I run my server, I get this error:
error app/styles/main.scss (Line 7 of app/components/foundation/scss/foundation.scss: File to import not found or unreadable: modular-scale.
The import is #import "modular-scale";
I tried to change that to #import "foundation/functions/modular-scale";
But got a loop warning then, saying it was trying to import itself.
Tried adding the ruby gem 'modular-scale' in my grunt file, under compass with
require: 'modular-scale'
But it doesn't seem to work either
Anyways, I am not sure what to do here.
I had a similar problem when migrating an app to 1.0. Bower was installing the components into a top-level components directory instead of at app/components. If that is the case, one fix is to add a file .bowerrc with
{
"directory": "app/components"
}
I'm not sure the root cause, as creating a new webapp with Yeoman 1.0 doesn't suffer from this problem.

Resources