Propshaft 无法找到通过纱线安装的资产

Question

我将导轨从链轮升级为传动轴。编译资产时，我收到一条错误消息，指出无法找到通过纱线安装的任何内容的文件。

错误

➜  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

应用程序/资产/样式表/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": "[email protected]",
  "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"
  }
}

Answer 1

propshaft

只是推动CSS，导入是由

sass

完成的，它也在搜索

--load-path=node_modules

。我猜你没有node_modules，因为

[email protected]

。

# .yarnrc.yml

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

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

https://yarnpkg.com/features/linkers

---

更新

检查您可以导入的内容：

@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

是否需要重启，bootstrap已经包含了。