gajus / gajus/babel-plugin-react-css-modules

Does not support background images.

Open
#221 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2k
Forks
159
PR merge metrics
No merged PRs in 30d

Description

After using css-modules, the background-image in scss will not work.
Please, How to configure it correctly ?

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

directory:

```
├── react-test
│   ├── assets
│   └── black-coffee.png
│   └── style.scss
│   └── Counter.jsx
```

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

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

```

webpack

```js
...
{
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
```js
module.exports = {
plugins: [require("autoprefixer")({
browsers: ['last 2 versions']
}), require("cssnano")()]
}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.