Webpacker: NotFoundError when using stylesheet_pack_tag

[btc]

Can't find hello_react.css in public/packs/manifest.json. Is webpack still compiling?

hello_react.css is in app/javascript/packs/

Am I doing something wrong? Could the documentation be clearer?

[ytbryan]

Did you run or restart ./bin/webpack-dev-server to serve your css?

[btc]

Yes. And when I run bin/webpack, I get the following:

ts-loader: Using [email protected] and tsconfig.json
Hash: a15ba687510c64de6985
Version: webpack 2.5.1
Time: 4533ms
             Asset       Size  Chunks                    Chunk Names
    hello_react.js     770 kB       0  [emitted]  [big]  hello_react
    application.js    3.43 kB       1  [emitted]         application
hello_react.js.map     882 kB       0  [emitted]         hello_react
application.js.map    3.46 kB       1  [emitted]         application
     manifest.json  282 bytes          [emitted]
   [1] ./~/fbjs/lib/warning.js 2.1 kB {0} [built]
   [4] ./~/react-dom/lib/ReactDOMComponentTree.js 6.27 kB {0} [built]
  [14] ./~/react/lib/ReactElement.js 11.2 kB {0} [built]
  [17] ./~/react-dom/lib/ReactReconciler.js 6.21 kB {0} [built]
  [18] ./~/react/lib/React.js 3.32 kB {0} [built]
  [31] ./~/react/lib/canDefineProperty.js 661 bytes {0} [built]
  [80] ./~/react-dom/index.js 59 bytes {0} [built]
  [81] ./~/react/react.js 56 bytes {0} [built]
 [111] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
 [173] ./~/react/lib/ReactPropTypes.js 500 bytes {0} [built]
 [175] ./~/react/lib/ReactPureComponent.js 1.32 kB {0} [built]
 [176] ./~/react/lib/ReactVersion.js 350 bytes {0} [built]
 [179] ./~/react/lib/onlyChild.js 1.34 kB {0} [built]
 [181] ./app/javascript/packs/application.ts 515 bytes {1} [built]
 [182] ./app/javascript/packs/hello_react.tsx 565 bytes {0} [built]
    + 168 hidden modules

There's no mention of css. In general, how should one reference css that's included in libraries added with yarn (in node_modules)?

[gauravtiwari]

You would need to import them in your packs @btc. Check this section for linking internal styles - https://github.com/rails/webpacker#linking-to-static-assets

// packs/hello_react.js
import 'bootstrap/dist/whatever_bundle.css'

Then you will have hello_react.css bundle. Makes sense?

[gauravtiwari]

You can read this issue - https://github.com/rails/webpacker/issues/321 and https://github.com/rails/webpacker/issues/347