Parcel: Parcel is not compiling the SCSS

[ghost]

❔ Question

When I run 'parcel index.html' then all files are loaded correctly in the production server with localhost but when I want to compile them with 'parcel build index.html' and open the index.html then the SCSS seems missing and I think the JS isn't loaded either. What is wrong?

🔦 Context

I can't compile the files and hence cannot push it to my web site.

💻 Code Sample

I don't see any error.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.7
| Node | v8.11.1
| npm | 5.6.0
| Operating System | Windows

[cmnstmntmn]

@frequencyoflove i belive this is related to this https://github.com/parcel-bundler/parcel/issues/1165

[ghost]

@cmnstmntmn hi, I am not using any postCSS though. is it correct that I do this for my js:
import '../sass/styles.scss'; cause it gives me expected an identifier.

[cmnstmntmn]

well, i do belive this is also true for SCSS.

as @devongovett says

Parcel processes each CSS file independently, which is why your imported variables aren't being replaced. This strategy makes it faster since we can process each CSS file in parallel rather than one huge concatenated at the end.

https://github.com/parcel-bundler/parcel/issues/1165#issuecomment-380150076

[ghost]

@cmnstmntmn any way to resolve this other than using parcel?

[ghost]

I have used the sass plugin for visual studio code and just renamed the styles to .css
I would still be interested in a solution tho since parcel seems pretty great.
I am quite new to this field so I have troubles understanding the other thread.

[cmnstmntmn]

well,

you can add a chain of commands inside package.json

package.json

{
 "scripts": {
   "build": "npm run parcel && npm run sass",
   "sass": "sass",
   "parcel": "parcel build index.html"
 }
}

then run npm run build

[ghost]

I am getting this error:

$ npm run build

> [email protected] build C:\Users\FREQUENCY\Desktop\Maths Addition Game\public
> npm run parcel && npm run sass


> [email protected] parcel C:\Users\FREQUENCY\Desktop\Maths Addition Game\public
> parcel build index.html

√  Built in 3.07s.

dist\game.c24108ff.map       7.1 KB      9ms
dist\styles.8fe14b24.css    4.17 KB    1.60s
dist\game.8fe14b24.css      4.17 KB    1.61s
dist\game.c24108ff.js       3.36 KB    1.62s
dist\index.html             1.48 KB    1.38s
dist\styles.8fe14b24.map       98 B      9ms

> [email protected] sass C:\Users\FREQUENCY\Desktop\Maths Addition Game\public
> sass

Compile Sass to CSS.

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/>

=== Input and Output ===================
    --[no-]stdin               Read the stylesheet from stdin.
    --[no-]indented            Use the indented syntax for input from stdin.
-I, --load-path=<PATH>         A path to use when resolving imports.
                               May be passed multiple times.

-s, --style=<NAME>             Output style.
                               [expanded (default), compressed]

    --update                   Only compile out-of-date stylesheets.

=== Source Maps ========================
    --[no-]source-map          Whether to generate source maps.
                               (defaults to on)

    --source-map-urls          How to link from source maps to source files.
                               [relative (default), absolute]

    --[no-]embed-sources       Embed source file contents in source maps.
    --[no-]embed-source-map    Embed source map contents in CSS.

=== Other ==============================
    --watch                    Watch stylesheets and recompile when they change.
    --[no-]poll                Manually check for changes rather than using a native watcher.
                               Only valid with --watch.

    --[no-]stop-on-error       Don't compile more files once an error is encountered.
-i, --interactive              Run an interactive SassScript shell.
-c, --[no-]color               Whether to emit terminal colors.
-q, --[no-]quiet               Don't print warnings.
    --[no-]trace               Print full Dart stack traces for exceptions.
-h, --help                     Print this usage information.
    --version                  Print the version of Dart Sass.
npm ERR! code ELIFECYCLE
npm ERR! errno 64
npm ERR! [email protected] sass: `sass`
npm ERR! Exit status 64
npm ERR!
npm ERR! Failed at the [email protected] sass script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\FREQUENCY\AppData\Roaming\npm-cache\_logs\2018-08-27T12_50_43_504Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 64
npm ERR! [email protected] build: `npm run parcel && npm run sass`
npm ERR! Exit status 64
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\FREQUENCY\AppData\Roaming\npm-cache\_logs\2018-08-27T12_50_43_577Z-debug.log

My package.json is:

{
  "name": "public",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npm run parcel && npm run sass",
    "sass": "sass",
    "parcel": "parcel build index.html"
  },
  "author": "frequency",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^9.1.3",
    "jslint": "^0.12.0",
    "sass": "^1.13.0"
  },
  "devDependencies": {
    "cssnano": "^4.1.0",
    "node-sass": "^4.9.3"
  }
}

[cmnstmntmn]

@frequencyoflove well yes; you have to run a valid sass cli command.

in my case i'm running postscss this way:

postcss -c scripts/postcss.config.js --replace src/css/app.css -o dist/*.css

as far as i remember, with sass is something like this: sass input.scss output.css

[DeMoorJasper]

@cmnstmntmn this is completely unrelated to scss, sass compiler handles imports itself, so variables or imports should never be an issue.

Most issues with sass have been resolved by switching to dart-sass, this hasn't been released yet however. This will be part of the next Parcel release.

Not sure what the core issue is here, could you provide some more info @frequencyoflove

[cmnstmntmn]

@DeMoorJasper i didn't knew that; but as i said, i just though by the symptoms, it might be related.

[RickOrchard]

@frequencyoflove i belive this is related to this #1165

I'm not sure that is the case. I have the same problem, but after investigating the HTML file i found where things go wrong -> the path to the generated css file got a '/' prepended so after removing this slash the generated css file (from stylus-lang source in my case) was found and the HTML document displayed properly.

Summary: somewhere in the process a '/' is incorrectly prepended to the relative path in the HTML