Images can't be resolved in Sass when using CSS modules

Question

I'm using Webpacker in my Rails project and want to use CSS modules to obfuscate the CSS classes for my CSS and SASS files in my components.

./config/webpack/development.js looks like:

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

/// Use CSS modules and obfuscate CSS class names
const cssRule = environment.loaders.get('css')
const sassRule = environment.loaders.get('sass')
const cssLoader = cssRule.use.find(loader => loader.loader === 'css-loader')
const sassLoader = sassRule.use.find(loader => loader.loader === 'css-loader')

cssLoader.options = Object.assign(cssLoader.options, {
  modules: true,
  localIdentName: '[path][name]__[local]--[hash:base64:5]'
})

sassLoader.options = Object.assign(sassLoader.options, {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  })
///

module.exports = environment.toWebpackConfig()

Now this works fine for just the CSS and SASS and obfuscates them fine... however when I reference something such as an image inside my CSS I get the error:

ERROR in ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./app/javascript/components/menu/main.scss Module not found: Error: Can't resolve 'background.png' in '/Users/cameron.drysdale/Projects/webpack_test/app/javascript/components/menu' @ ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./app/javascript/components/menu/main.scss 7:785-805

Inside main.scss I have:

.element {
    background-color: #ffffff;
    background-image: url('background.png');
    background-position: left center;
    background-repeat: no-repeat;
}

If I turn off the CSS modules, then it works fine...

What's causing the error?

inkdeep inkdeep · Accepted Answer · 2019-03-13T16:45:20

1

votes

you'll need to use resolve-url-loader to have the url resolve correctly

Images can't be resolved in Sass when using CSS modules

1 Answers