Блог

Я использую Webpacker в своем проекте Rails и хочу использовать CSS-модули для обфускации CSS-классов для моих файлов CSS и SASS в моих компонентах.

./config/webpack/development.js выглядит как:

 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()
  

Теперь это отлично работает только для CSS и SASS и отлично их запутывает… однако, когда я ссылаюсь на что-то, например, на изображение внутри моего CSS, я получаю сообщение об ошибке:

ОШИБКА в ./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 не найден: Ошибка: не удается разрешить ‘background.png’ in’/Users/cameron.drysdale/Проекты/webpack_test/приложение / javascript/ компоненты /меню’ @ ./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

Внутри main.scss у меня есть:

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

Если я отключу модули CSS, то все будет работать нормально…

Что вызывает ошибку?

вам нужно будет использовать resolve-url-loader для корректного url разрешения