Configure CSS Modules in Webpacker

[gabalicious]

How can I get the example to work with Rails 5.1 and webpacker?

// app/javascript/components/ChatWindow.js
import React from  'react';
import Style from './ChatWindow.scss'
class ChatWindow extends React.Component {
  constructor (props) {

  }
  render () {
    return (
      <div className={Style.ChatWindow}>

      </div>
    );
  }
}
export default ChatWindow;

// app/javascript/components/ChatWindow.scss
.ChatWindow {
  width: 100%;
  min-height: 10%;
  border: black 1px solid;
  background: red;
}

// config/webpack/loaders/sass.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { env } = require('../configuration.js')

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: {
        modules: true,
        sourceMap: true,
        importLoaders: 2,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    },
    'postcss-loader',
    'sass-loader'
  ]
})
}

[gabalicious]

I figured it out. I was missing the stylesheet_pack_tag. In my case it was<%= stylesheet_pack_tag 'index' %>

[brentdodell]

How would I modify the new style loader to enable this now that Webpacker 3.0 is released and all of these configs no longer live inside config/webpack/loaders? I want to enable CSS Modules with it.

The example given here is for modifying the babel loader, which in my opinion, is MUCH simpler than the styles loader.

[gauravtiwari]

Please see this comment: #756 (comment)

[dankmitchell]

@gauravtiwari I'm trying to do something very similar but one of my node packages(govuk-elements-sass) if trying to import a scss partial(colours.scss) from another node package(govuk_frontend_toolkit) which fails, I have added the below but it's still not working -

Error

@import "colours";
File to import not found or unreadable: colours.

Code

const { environment } = require('@rails/webpacker')
const merge = require('webpack-merge')

const sassLoader = environment.loaders.get('sass')
const cssLoader = sassLoader.use.find(loader => loader.loader === 'css-loader')
const path = require('path')

cssLoader.options = Object.assign(cssLoader.options, {
  modules: true,
  localIdentName: '[path][name]__[local]--[hash:base64:5]',
  includePaths: [
    path.resolve(__dirname, "node_modules/govuk_frontend_toolkit/stylesheets"),
    path.resolve(__dirname, "node_modules/govuk-elements-sass/public/sass")
  ]
})

module.exports = environment

Heres a similar issue with webpacker and these node packages - alphagov/govuk_elements#334

[gauravtiwari]

@danmitchell- How are you importing the govuk-elements-sass package? Are you importing within your sass file or JS file?

[dankmitchell]

@gauravtiwari

I have a file called
app/javascript/stylesheets/application.scss
which contains a normal scss import
@import '~govuk-elements-sass/public/sass/govuk-elements';

and app/javascript/packs/application.js
has
import '../stylesheets/application.scss';

and inside my app layout file I have = stylesheet_pack_tag 'application'

[gauravtiwari]

Just checked, it's a problem with the package structure itself. The @imports used are not standard sass-loader imports (~) i.e. it's trying to resolve relatively. There is a package called resolve-url-loader that helps with url imports but can't think of anything that does the same for sass.

Perhaps, you wanna consider removing toolkit related @import from govuk-elements package and just import them both separately into your application.css:

@import '~govuk-elements-sass/public/sass/govuk-elements';
@import "~govuk_frontend_toolkit/stylesheets/base";

[dankmitchell]

Okay, thanks @gauravtiwari