0

I upgraded my rails from sprockets to propshaft. When compiling assets I'm getting an error saying files cannot be found for anything installed via yarn.

error

➜  rails-app git:(asset-performance) ✗ yarn build:css                
Error: Can't find stylesheet to import.
  ╷
4 │ @import 'bootstrap-reboot';
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  app/assets/stylesheets/application.sass.scss 4:9  root stylesheet

app/assets/stylesheets/application.sass.scss

// Entry point for your Sass build
// @import 'animate';
@import 'config';
@import 'bootstrap-reboot';
@import 'bootstrap';
@import 'bootstrap-social';
@import 'select2.min';
@import 'select2-bootstrap.min';
@import 'font-awesome';
@import 'variables';
@import 'global';
@import 'components';
@import 'bootstrap-notifications.min';
@import 'pages';

package.json

{
  "name": "rails application",
  "private": true,
  "engines": {
    "node": "18.x"
  },
  "dependencies": {
    "@ladjs/bootstrap-social": "niftylettuce/bootstrap-social#gh-pages",
    "@popperjs/core": "^2.11.8",
    "@rails/actioncable": "7.0.6",
    "@rails/activestorage": "7.0.6",
    "@rails/ujs": "7.0.6",
    "@rails/webpacker": "^5.4.4",
    "autosize": "^4.0.2",
    "bootstrap": "^5.3.1",
    "bootstrap-notifications": "^1.0.3",
    "bootstrap-notify": "^3.1.3",
    "bootstrap-reboot": "^4.5.6",
    "bootstrap-sass": "^3.4.3",
    "brotli-webpack-plugin": "^1.1.0",
    "esbuild": "^0.19.2",
    "font-awesome": "^4.7.0",
    "jquery": "^3.7.0",
    "jquery-jscroll": "^0.0.2",
    "jquery-mask-plugin": "^1.14.16",
    "jquery-match-height": "^0.7.2",
    "jquery-textcomplete": "^1.8.5",
    "jquery-ui-dist": "^1.13.2",
    "jquery-ujs": "^1.2.2",
    "jquery.jscroll": "^1.0.2",
    "popper.js": "^1.16.1",
    "rails-erb-loader": "^5.5.2",
    "sass": "^1.66.1",
    "select2": "^4.1.0-rc.0",
    "select2-bootstrap-theme": "^0.1.0-beta.10",
    "tether": "1.4.7",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "yarn": "^1.22.19"
  },
  "version": "0.1.0",
  "devDependencies": {
    "prettier": "2.3.1",
    "webpack-dev-server": "^3.11.3"
  },
  "packageManager": "yarn@2.4.3",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}
Antarr Byrd
  • 24,863
  • 33
  • 100
  • 188

1 Answers1

0

propshaft just pushes css around, importing is done by sass which is also searching --load-path=node_modules. I'm guessing you don't have node_modules, because yarn@2.4.3.

# .yarnrc.yml

nodeLinker: node-modules # add this, run `yarn install`

yarnPath: .yarn/releases/yarn-2.4.3.cjs

https://yarnpkg.com/features/linkers

Update

Check what you can import:

@import "bootstrap-reboot";                      // ok (works for me)
// node_modules/bootstrap-reboot/index.scss

// @import "bootstrap";                          // no
@import "bootstrap/dist/css/bootstrap";          // ok
// node_modules/bootstrap/dist/css/bootstrap.css

// etc

Do you need reboot, bootstrap already includes it.

Alex
  • 16,409
  • 6
  • 40
  • 56