🐛 bug report

Identical code (see https://github.com/joseph-long/parcel2sass) will successfully @import CSS/Sass from an installed package when run with parcel serve, but fail with parcel build.

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

{
  "name": "parcel2sass",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "bulma": "^0.9.2",
    "parcel": "^2.0.0-beta.1"
  },
  "devDependencies": {
    "sass": "^1.32.7"
  }
}

🤔 Expected Behavior

Code that builds successfully with parcel serve should also work with parcel build

😯 Current Behavior

parcel serve:

19:55:48 raven:parcel2sass josephlong
$ yarn run parcel serve frontend/index.html
yarn run v1.22.10
$ /Users/josephlong/devel/parcel2sass/node_modules/.bin/parcel serve frontend/index.html
ℹ️ Server running at http://localhost:1234
✨ Built in 5.50s
✨  Done in 22.86s.

parcel build:

19:56:33 raven:parcel2sass josephlong
$ yarn run parcel build frontend/index.html
yarn run v1.22.10
$ /Users/josephlong/devel/parcel2sass/node_modules/.bin/parcel build frontend/index.html
🚨 Build failed.
@parcel/transformer-sass: Can't find stylesheet to import.
  ╷
1 │ @import "bulma";
  │         ^^^^^^^
  ╵
  frontend/app.scss 1:9  root stylesheet
Error: Can't find stylesheet to import.

💁 Possible Solution

Darned if I know.

🔦 Context

I'm mocking up designs with an index.html and parcel serve, then converting them into Django templates and trying to build the CSS/JS assets for inclusion in the Django app's static files folder.

💻 Code Sample

https://github.com/joseph-long/parcel2sass

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-beta.1
Node	15.3.0
npm/Yarn	1.22.10
Operating System	macOS Big Sur

joseph-long commented 3 years ago

In #4609 I saw prefixing node_modules to the paths seemed to work. It does in my minimal repro, but in my actual project I have an app.scss like

@import "./framework.sass";
@import 'node_modules/@fortawesome/fontawesome-free/css/all.css';
@import './NotoSans/NotoSans.css';

and get this error

20:13:02 raven:exao_dap[master !?+] josephlong
$ yarn run parcel build --no-content-hash --dist-dir ./exao_dap/static/ ./frontend/index.html
yarn run v1.22.10
$ /Users/josephlong/devel/exao_dap/node_modules/.bin/parcel build --no-content-hash --dist-dir ./exao_dap/static/ ./frontend/index.html
🚨 Build failed.
@parcel/core: Failed to resolve 'node_modules/@fortawesome/fontawesome-free/css/all.css' from './frontend/app.scss'
/Users/josephlong/devel/exao_dap/frontend/app.scss:4:9
  3 | @import './NotoSans/NotoSans.css';
> 4 |
>   | ^
  5 |
  6 | ul.inline, ol.inline {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

As before, the unprefixed path (@import '@fortawesome/fontawesome-free/css/all.css';) builds with parcel serve fine.

mischnic commented 3 years ago

Even stranger:

parcel serve: no error
parcel watch: error
parcel build: error

AdrianoCahete commented 2 years ago

Almost the same problem here:

parcel ./src/style.scss: build/no error
parcel build ./src/style.scss: error (console shows that it's built, but there's nothing on dist folder")

src/style.scss is a scss file inside the project, not imported from any package.

package.json

{
  "name": "@companyName/style",
  "version": "0.1.0",
  "style": "dist/style.css",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "targets": {
    "default": {
      "distDir": "./dist",
      "source": "./src/style.scss",
      "sourceMap": false
    }
  },
  "alias": {
    "bootstrap": "./node_modules/bootstrap-scss"
  },
  "files": [
    "dist/style.css"
  ],
  "exports": {
    "./companyName": "./dist/style.css"
  },
  "scripts": {
    "start": "build",
    "build": "npm run lint && parcel build ./src/style.scss",
    "build:dev": "parcel watch ./src/**/*.scss",
    "clean": "rimraf dist && rimraf out",
    "lint": "stylelint ./src/**/*.scss",
    "lint:fix": "stylelint --fix ./src/**/*.scss",
    "lint:config": "stylelint --print-config ./src/style.scss",
  },
  "author": "Adriano Cahete",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.3.2",
    "autoprefixer": "^9.8.6",
    "bootstrap-scss": "^5.1.1",
    "cssnano": "^5.1.3",
    "husky": "^7.0.4",
    "parcel": "^2.3.2",
    "parcel-plugin-prettier": "^0.2.1",
    "postcss": "^8.4.8",
    "postcss-custom-properties": "^12.1.4",
    "postcss-import": "^14.0.2",
    "postcss-url": "^10.1.3",
    "prettier": "^2.5.1",
    "rimraf": "^3.0.2",
    "sass": "^1.49.9",
    "stylelint": "^14.5.3",
    "stylelint-color-format": "^1.1.0",
    "stylelint-config-prettier-scss": "0.0.1",
    "stylelint-config-sass-guidelines": "^9.0.1",
    "stylelint-config-standard-scss": "^3.0.0",
    "stylelint-csstree-validator": "^2.0.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.5.0",
    "stylelint-order": "^5.0.0",
    "stylelint-prettier": "^2.0.0",
    "stylelint-scss": "^4.1.0",
    "stylelint-selector-no-empty": "^1.0.8"
  },
  "private": true
}

OS: Windows 11 parcel: v2.3.2

gytsen commented 2 years ago

I ran into this as well, but removing the "main" entry from my package.json seemed to fix it. Not sure what that would change in the sass transformer, but maybe there's a subtle bug with how it interacts with the entrypoints in package.json that is handled in parcel serve but not in parcel build.

sotpotatis commented 1 year ago

I just experienced the same issue and the solution suggested by @gytsen worked for me. My import was @import "~bootstrap/scss/bootstrap";, which worked fine in serve but not in build.

parcel-bundler / parcel

'parcel serve' works but 'parcel build' fails to import Sass package #5813