🐛 On Angular-Cli projects built with "ng new Demo_Project --style=scss" parcel can't compile scss

tatsujb commented 6 years ago

🎛 Configuration (.babelrc, package.json, cli command)

{
  "name": "web.ui",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "parcel": "parcel",
    "start": "parcel ./src/index.html --no-cache",
    "build": "parcel build ./src/index.html -d /distribution --no-cache --no-minify",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.3",
    "@angular/common": "^5.2.3",
    "@angular/compiler": "^5.2.3",
    "@angular/core": "^5.2.3",
    "@angular/forms": "^5.2.3",
    "@angular/http": "^5.2.3",
    "@angular/platform-browser": "^5.2.3",
    "@angular/platform-browser-dynamic": "^5.2.3",
    "@angular/router": "^5.2.3",
    "core-js": "^2.5.3",
    "node-sass": "^4.7.2",
    "rxjs": "^5.5.6",
    "sass-loader": "^6.0.6",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.6.7",
    "@angular/compiler-cli": "^5.2.3",
    "@angular/language-service": "^5.2.3",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~9.4.0",
    "codelyzer": "^4.1.0",
    "jasmine-core": "~2.9.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.1",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.7.1",
    "parcel-bundler": "^1.5.1",
    "postcss-modules": "^1.1.0",
    "parcel-plugin-typescript": "^0.5.3",
    "parcel-plugin-angular": "0.5.1-next.13"
  }
}

🤔 Expected Behavior

scss is compiled on bothng serve and parcel ./src/index.html

😯 Current Behavior

ng serve creates project with compiled scss. parcel ./src/index.html ignores scss files entirely and outputs this error :

💁 Possible Solution

path into angular-cli's usage of scss compilation and use it for parcel or make sure parcel continues to use node-sass as it does with React.

💻 Code Sample

ts.config.json :

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "include": [
    "src/**/*.ts"
  ]
}

index.html :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script src="polyfills.ts"></script>
  <script src="main.ts"></script>
</body>
</html>

🌍 Your Environment

Software	Version(s)
Parcel	^1.5.1
Node	8.9.4
npm/Yarn	5.6.0
Operating System	windows 10 pro 64bit

also my stack shows this bug : https://github.com/gdi2290/angular-starter/issues/1555 : if any scss files that are present are empty the rather than serving the app without loading any style (as I have right now) it fails to compile at all. with : Unhandled promise rejection: Error: Error: Error: Could not find file: 'C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\src\polyfills.ts'.

fathyb commented 6 years ago

I cloned the repo you linked in the other issue on tienne/angular-parcel. It works if I modify the tsconfig.json (the one in the same dir as package.json) to add this :

{
  "compilerOptions": { /* your options*/ },
  "include": [
    "src/**/*.ts"
  ]
}

You can also check if node-sass is correctly installed : run node in the web.ui directory then type require('node-sass'). Do you get Error: Node Sass does not yet support your current environment or an object?

tatsujb commented 6 years ago

in that shared repo the package.json (and the project) is still set up to use ng serve, are you sure you ran : parcel ./src/index.html --no-cache?

(you also need to un-comment two lines in html.index)

I added your fix (I'd forgotten about that file, with all the things I keep changing in the setup, sorry about that), and I did parcel ./src/index.html --no-cache I get no error (and I don't get the error you mention)

PS C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui> node
> require('node-sass')
{ render: [Function],
  renderSync: [Function],
  info: 'node-sass\t4.7.2\t(Wrapper)\t[JavaScript]\r\nlibsass  \t3.5.0.beta.2\t(Sass Compiler)\t[C/C++]',
  types:
   { Number: [Function: SassNumber],
     String: [Function: SassString],
     Color: [Function: SassColor],
     Boolean: { [Function: SassBoolean] FALSE: SassBoolean {}, TRUE: SassBoolean {} },
     List: [Function: SassList],
     Map: [Function: SassMap],
     Null: { [Function: SassNull] NULL: SassNull {} },
     Error: [Function: SassError] },
  TRUE: SassBoolean {},
  FALSE: SassBoolean {},
  NULL: SassNull {} }
>

but my page looks like this :

if you do ng serve it look like it's supposed to look :

fathyb commented 6 years ago

~I get something different, the button is interactive but there is a blur (using Parcel)~

I got rid of the blur by closing svg tags now I get the same result as ng serve. It may be a Windows issue, I'll try it later.

tatsujb commented 6 years ago

wtf???

how come your scss compiles?

this is crazy. I added you as collaborator so you can push there. (careful i removed all the backend, try re-cloning)

thanks for continuing to help my noob self 🙁

fathyb commented 6 years ago

i'm pretty sure it comes from Windows, i'll push this to your repo once I get home and check that :)

tatsujb commented 6 years ago

ok. I cleaned up the repo and brought it up to speed.

tatsujb commented 6 years ago

did you figure it out? if the new updates to the repo are of a breaking sort could you push whatever worked to another branch?

fathyb commented 6 years ago

I tested on Windows and the SCSS works :

tatsujb commented 6 years ago

Ok.. so weird. can you push what you have to my repo? also the behavior in your screenshot is a little weird.

even though I also use chrome I only noticed such a discoloration towards bright cyan for the "goo" parts on firefox, for chrome, it's supposed to look like this :

and like you had previously : https://github.com/fathyb/parcel-plugin-angular/issues/3#issuecomment-363411113

also notice how the html and body margin and padding 0 are ignored.

But I'm nitpicking I'd much rather have this state than continue sticking with ng serve/build

tatsujb commented 6 years ago

is it possible it's because the I turned root css file into an scss file? on my "ng serve project", reverting that allowed me to have working browsing transitions (still with scss on the rest of the project) Maybe having a root scss file is not allowed. just like having an html file as root is mandatory. the difference being that a root scss file doesn't completely crash the project.

fathyb / parcel-plugin-angular