Webpacker: Linking Styles not working for me.

[vitalyliber]

I used webpacker (1.2) with Rails 5.1 and tryed "linking styles" by instructions in the Readme, but I haven't success.

Styles haven't applyed for the React component.

Please, give any advise.

_app/javascript/main/pages/login_

import React, {Component} from 'react'
import '../styles/login.sass'

export default class Login extends Component {
  render(){
    return(
      <div className="account">
        <p>Hello</p>
      </div>
    )
  }
}

_app/javascript/main/styles/login.sass_

.account
  color: red
  padding: 20px
  font-size: 12px
  background-color: #1c2324

[gauravtiwari]

Could you please check your manifest.json and see what css files is being outputted? It's generally [pack_name].css

[vitalyliber]

@gauravtiwari I have this text in manifest.json

{
  "application.js": "http://0.0.0.0:8080/packs/application.js",
  "hello_react.js": "http://0.0.0.0:8080/packs/hello_react.js",
  "main.css": "http://0.0.0.0:8080/packs/main.css",
  "main.js": "http://0.0.0.0:8080/packs/main.js"
}

Also in 'view' I use only = javascript_pack_tag 'main'.

[gauravtiwari]

You would also need to add <%= stylesheet_pack_tag 'main' %>

[vitalyliber]

@gauravtiwari thanks. It is work.
But I used this part of readme.

Seems I don't should to use <%= stylesheet_pack_tag 'main' %>.

May be I'm wrong.

[gauravtiwari]

@vitalyliber It's documented just below that section - https://github.com/rails/webpacker#inside-views.

[xijo]

@gauravtiwari I just stumbled about the exact same issue, maybe we could emphasise this fact a bit in order to reduce future confusion?

[ajsharp]

@gauravtiwari This seems like a bug. I'm also following the exact instructions from "Within your JS app", including a sass stylesheet and an image. The image gets loaded fine and rendered correctly, the styles do not. If I print the styles to console, it returns an empty object.

It's also worth noting that inlining styles in this way can be very useful for hot reloading, which does not work for stylesheets linked from the pack stylesheet.

[ajsharp]

Upon further investigation, this appears to be an issue with the default webpacker sass configuration, which uses the ExtractTextPlugin in two places: shared.js and sass.js.

If I comment out the plugin line in shared.js and change the configuration to this in sass.js, it works:

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
    { loader: 'postcss-loader', options: { sourceMap: true } },
    'resolve-url-loader',
    { loader: 'sass-loader', options: { sourceMap: true } }
  ]
}

Obviously, this is not ideal for a production environment, but allows having css hot reloading in development.

[gauravtiwari]

Hey @ajsharp Yepp, waiting on a PR to me made for HMR which will restructure few of these bits - hopefully in next few days :)