SCSS problems when using Covalent

[akalitenya]

Currently i'm stuck on importing Covalent 0.10.1 to starter/no-universal-support branch:
https://github.com/Teradata/covalent
https://github.com/Teradata/covalent-quickstart

I have created repo to show this issue:
https://github.com/akalitenya/angular-webpack2-starter-covalent-test
akalitenya/angular-webpack2-starter-covalent-test@147d0f3

when running 'yarn sass' i get this error:
{
"status": 1,
"file": "/Users/aleksandrkalitena/angular-webpack2-starter-covalent-test/src/app/styles.scss",
"line": 6,
"column": 1,
"message": "It's not clear which file to import for '@import "@covalent/core/common/platform"'.\nCandidates:\n @covalent/core/common/platform.scss\n @covalent/core/common/platform.css\nPlease delete or rename all but one of these files.\n",
"formatted": "Error: It's not clear which file to import for '@import "@covalent/core/common/platform"'.\n Candidates:\n @covalent/core/common/platform.scss\n @covalent/core/common/platform.css\n Please delete or rename all but one of these files.\n on line 6 of src/app/styles.scss\n>> @import '@covalent/core/common/platform';\n ^\n"
}
error Command failed with exit code 1.

when running 'yarn start' i get bunch of these errors:
ERROR in ...@covalent/core/data-table/data-table-column/data-table-column.component.scss
Module parse failed: /Users/aleksandrkalitena/angular-webpack2-starter-covalent-test/node_modules/@covalent/core/data-table/data-table-column/data-table-column.component.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :host {
| font-size: 12px;
| font-weight: bold;
@ ...@covalent/core/data-table/data-table-column/data-table-column.component.ts 138:21-66
@ ...@covalent/core/data-table/data-table.module.ts
@ ...@covalent/core/index.ts
@ ...src/app/app.module.ts
@ ...src/main.browser.ts
@ multi main

styles.scss file complains about imports" it can't resolve first directory:
"@import '@angular/material/core/theming/all-theme';"

What the difference with this:
"@import '~@angular/material/core/theming/all-theme';" ?
^^^^^^^^^^^^^

I can't figure out proper way of dealing with scss files in this repo, especially when using 3rd party libraries. Guide will be very useful.

I appreciate your work on this repo!

[DzmitryShylovich]

It's not clear which file to import for '@import "@covalent/core/common/platform"'.\n Candidates:\n @covalent/core/common/platform.scss\n @covalent/core/common/platform.css\n Please delete or rename all but one of these files

[akalitenya]

Which one of these files should i delete?

[DzmitryShylovich]

any, it doesn't matter.

[akalitenya]

is it expected to delete .css in third party node module?

if i delete platform.css and run 'yarn sass' i got new error:
{
"status": 1,
"file": "/Users/aleksandrkalitena/angular-webpack2-starter-covalent-test/node_modules/@covalent/core/common/styles/_input.scss",
"line": 1,
"column": 1,
"message": "File to import not found or unreadable: ../../../../node_modules/@angular/material/core/theming/palette.\nParent style sheet: /Users/aleksandrkalitena/angular-webpack2-starter-covalent-test/node_modules/@covalent/core/common/styles/_input.scss",
"formatted": "Error: File to import not found or unreadable: ../../../../node_modules/@angular/material/core/theming/palette.\n Parent style sheet: /Users/aleksandrkalitena/angular-webpack2-starter-covalent-test/node_modules/@covalent/core/common/styles/_input.scss\n on line 1 of node_modules/@covalent/core/common/styles/_input.scss\n>> @import '../../../../node_modules/@angular/material/core/theming/palette';\n ^\n"
}

Teradata/covalent#232

anyway this doesn't resolve "You may need an appropriate loader to handle this file type." when running 'yarn start'

[akalitenya]

finally, issues were resolved by doing this inside Covalent library folder:

delete platform.scss (platform.css stays untouched)
replace "\0" with "" in platform.css
replace ".scss" with ".css" in styleURLs in Covalent files
replace "~@angular..." with "@angular..." imports in Covalent .scss files

then run "yarn sass", "yarn build:dev", "yarn start" without issues

Is it only and/or right way to deal with 3rd party scss/css with this starter?

[qdouble]

@akalitenya it's just how node-sass deals with the issue of having scss and css files with the same names, not fully sure if you run into it without node sass...but typically, if you run into a 3rd party vendor who packages their stuff in such a way to cause an issue, you can just add a postinstall script that removes those files