Babel-plugin-react-css-modules не поддерживает фоновые изображения

After using css-modules, the background-image in scss will not work.

Please, How to configure it correctly?

репо: https://github.com/pdsuwwz/Antd-app

Ошибка:

ERROR in ./src/script/components/redux-test/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'assets/black-coffee.png' in '/Users/admin/Documents/zhike/github/myRepository/Antd-test/Antd-app/src/script/components/redux-test'
    at factory.create (/Users/admin/Documents/zhike/github/myRepository/Antd-test/Antd-app/node_modules/webpack/lib/Compilation.js:821:10)
    at factory (/Users/admin/Documents/zhike/github/myRepository/Antd-test/Antd-app/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users/admin/Documents/zhike/github/myRepository/Antd-test/Antd-app/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/admin/Documents/zhike/github/myRepository/Antd-test/Antd-app/node_modules/webpack/lib/NormalModuleFactory.js:224:22)

.babelrc:

...
["babel-plugin-react-css-modules", {
  "generateScopedName": "[name]_[local]_[hash:base64:5]",
  "webpackHotModuleReloading": true,
  "filetypes": {
    ".scss": {
      "syntax": "postcss-scss"
    }
  }
}]
...

scss:

.test-relativeimg{
  width: 200px;
  height: 200px;
  background-image: url("./assets/black-coffee.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

веб-пакет

{
  test: /\.scss/,
  use: [MiniCssExtractPlugin.loader, "css-loader?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]", {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      sourceMap: true,
      config: {
        path: resolve('postcss.config.js')
      }
    },
  },
  "sass-loader"],
  exclude: resolve('node_modules'),
  include: resolve('src')
}

postcss.config.js

module.exports = {
  plugins: [require("autoprefixer")({
    browsers: ['last 2 versions']
  }), require("cssnano")()]
}

Где в вашем репо папка с активами?

Tiago Coelho 11.12.2018 07:30
Поиск всех неиспользуемых файлов в проекте
Поиск всех неиспользуемых файлов в проекте
Количество файлов в проекте растет по мере его развития. И если быть по-настоящему честным, их продвижение происходит в геометрической прогрессии...
Настройка шаблона Metronic с помощью Webpack и Gulp
Настройка шаблона Metronic с помощью Webpack и Gulp
Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...
0
2
326
1

Ответы 1

Проблема в том, что Webpack нужен загрузчик для файла png.

You need url-loader || file-loader to get images/assets into your bundle

Дополнительная информация

Проблема решена, похоже cssnano повлиял на css-модули.

returnTrue 18.12.2018 03:54

Другие вопросы по теме