Изображения не могут быть разрешены в Sass при использовании модулей CSS - PullRequest
Новая
       25

Изображения не могут быть разрешены в Sass при использовании модулей CSS

0 голосов
/ 13 марта 2019

Я использую 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! ./ приложение / JavaScript / компоненты / меню / main.scss Модуль не найден: Ошибка: не удается разрешить 'background.png' в '/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 ?? исх - 2-4 ./ приложение / JavaScript / компоненты / меню / 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, то все работает нормально ...

В чем причина ошибки?

1 Ответ

1 голос
/ 13 марта 2019

вам нужно будет использовать resol-url-loader , чтобы url разрешить правильно

...