gajus / gajus/babel-plugin-react-css-modules
Does not support background images.
- 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.