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

tatsujb · 2018-02-06T11:37:55Z

🎛 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 both ng 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 : PatrickJS/PatrickJS-starter#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'.

The text was updated successfully, but these errors were encountered:

fathyb · 2018-02-06T12:04:44Z

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 · 2018-02-06T12:17:46Z

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 · 2018-02-06T12:44:36Z

~~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 · 2018-02-06T13:29:37Z

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 · 2018-02-06T14:02:41Z

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

tatsujb · 2018-02-06T17:00:45Z

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

tatsujb · 2018-02-08T08:08:22Z

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 · 2018-02-11T20:58:23Z

I tested on Windows and the SCSS works :

tatsujb · 2018-02-12T09:14:21Z

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 : #3 (comment)

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 · 2018-02-13T08:39:22Z

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.

tatsujb mentioned this issue Feb 6, 2018

🙋 feature : up-to-date tienne/angular-parcel#1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tatsujb commented Feb 6, 2018 •

edited

Loading

fathyb commented Feb 6, 2018

tatsujb commented Feb 6, 2018 •

edited

Loading

fathyb commented Feb 6, 2018 •

edited

Loading

tatsujb commented Feb 6, 2018 •

edited

Loading

fathyb commented Feb 6, 2018

tatsujb commented Feb 6, 2018

tatsujb commented Feb 8, 2018

fathyb commented Feb 11, 2018

tatsujb commented Feb 12, 2018 •

edited

Loading

tatsujb commented Feb 13, 2018

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

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

Comments

tatsujb commented Feb 6, 2018 • edited Loading

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

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

💻 Code Sample

🌍 Your Environment

fathyb commented Feb 6, 2018

tatsujb commented Feb 6, 2018 • edited Loading

fathyb commented Feb 6, 2018 • edited Loading

tatsujb commented Feb 6, 2018 • edited Loading

fathyb commented Feb 6, 2018

tatsujb commented Feb 6, 2018

tatsujb commented Feb 8, 2018

fathyb commented Feb 11, 2018

tatsujb commented Feb 12, 2018 • edited Loading

tatsujb commented Feb 13, 2018

tatsujb commented Feb 6, 2018 •

edited

Loading

tatsujb commented Feb 6, 2018 •

edited

Loading

fathyb commented Feb 6, 2018 •

edited

Loading

tatsujb commented Feb 6, 2018 •

edited

Loading

tatsujb commented Feb 12, 2018 •

edited

Loading