I’m migrating source code from ionic3 to ionic4.
After migrating the source code, the following error occurs when building.
Please tell me how to solve it.
ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/global.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
color: color($colors, text_gray);
^
Undefined variable: "$colors".
in .\src\app\app.scss (line 75, column 18)
Error:
color: color($colors, text_gray);
^
Undefined variable: "$colors".
in .\src\app\app.scss (line 75, column 18)
at options.error (.\node_modules\node-sass\lib\index.js:291:26)
@ ./src/global.scss 1:14-241
@ multi ./src/theme/variables.scss ./src/global.scss
{
"name": "v4blank-temp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^0.803.23",
"@angular/common": "~8.2.14",
"@angular/core": "8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@ionic-native/android-permissions": "^5.20.0",
"@ionic-native/app-version": "^5.20.0",
"@ionic-native/calendar": "^5.20.0",
"@ionic-native/core": "^5.20.0",
"@ionic-native/dialogs": "^5.20.0",
"@ionic-native/geolocation": "^5.20.0",
"@ionic-native/globalization": "^5.20.0",
"@ionic-native/google-analytics": "^5.20.0",
"@ionic-native/in-app-browser": "^5.20.0",
"@ionic-native/location-accuracy": "^5.20.0",
"@ionic-native/native-storage": "^5.20.0",
"@ionic-native/network": "^5.20.0",
"@ionic-native/open-native-settings": "^5.20.0",
"@ionic-native/social-sharing": "^5.20.0",
"@ionic-native/splash-screen": "^5.20.0",
"@ionic-native/status-bar": "^5.20.0",
"@ionic/angular": "^4.11.10",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"angular-linky": "^1.2.2",
"claimtypes": "^0.1.0",
"cordova-android": "^8.1.0",
"cordova-ios": "^5.1.1",
"core-js": "^3.6.4",
"es6-promise-plugin": "^4.2.2",
"rxjs": "^6.5.4",
"rxjs-compat": "^6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/architect": "^0.803.23",
"@angular-devkit/core": "^8.3.23",
"@angular-devkit/schematics": "^8.3.23",
"@angular/cli": "^8.3.23",
"@angular/compiler": "~8.2.14",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@ionic/angular-toolkit": "^2.1.2",
"@types/jasmine": "^3.5.1",
"@types/jasminewd2": "~2.0.8",
"@types/node": "^13.5.0",
"codelyzer": "^5.2.1",
"com-sarriaroman-photoviewer": "^1.2.4",
"cordova-open-native-settings": "^1.5.2",
"cordova-plugin-android-permissions": "^1.0.2",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-calendar": "^5.1.5",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-geolocation": "^4.0.2",
"cordova-plugin-globalization": "^1.11.0",
"cordova-plugin-google-analytics": "^1.8.6",
"cordova-plugin-inappbrowser": "^3.2.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-network-information": "^2.0.2",
"cordova-plugin-request-location-accuracy": "^2.3.0",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-x-socialsharing": "^5.6.3",
"cordova-plugin-x-toast": "^2.7.2",
"css-loader": "^0.28.10",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.1",
"karma-jasmine": "~3.1.0",
"karma-jasmine-html-reporter": "^1.5.1",
"node-sass": "^4.13.1",
"protractor": "~5.4.2",
"sass-loader": "^7.1.0",
"ts-node": "~8.6.2",
"tslint": "~6.0.0",
"typescript": "~3.5.0"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-android-permissions": {},
"cordova-plugin-app-version": {},
"cordova-plugin-dialogs": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
},
"cordova-plugin-globalization": {},
"cordova-plugin-nativestorage": {},
"cordova-plugin-network-information": {},
"com-sarriaroman-photoviewer": {},
"cordova-open-native-settings": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+",
"PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION": "This app requires photo library access to function properly.",
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "This app requires photo library access to function properly."
},
"cordova-plugin-x-toast": {},
"cordova-plugin-google-analytics": {
"GMS_VERSION": "11.0.1"
},
"cordova-plugin-calendar": {
"CALENDAR_USAGE_DESCRIPTION": "This app uses your calendar",
"CONTACTS_USAGE_DESCRIPTION": " "
},
"cordova-plugin-request-location-accuracy": {
"PLAY_SERVICES_LOCATION_VERSION": "16.+"
},
"cordova-plugin-inappbrowser": {}
},
"platforms": [
"ios",
"android"
]
}
}
Ionic:
Ionic CLI : 5.4.6 (C:\Users\yosuke.yasui\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.803.23
@angular-devkit/schematics : 8.3.23
@angular/cli : 8.3.23
@ionic/angular-toolkit : 2.1.2
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v12.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.13.0
OS : Windows Server 2016
