babel-plugin-react-css-modules icon indicating copy to clipboard operation
babel-plugin-react-css-modules copied to clipboard

Cannot use absolute paths for importing css files

Open shettayyy opened this issue 5 years ago • 1 comments

{
  "presets": ["env", "react"],
  "plugins": [
    "transform-runtime",
    "transform-object-rest-spread",
    "react-hot-loader/babel",
    "syntax-dynamic-import",
    "universal-import",
    [
      "react-css-modules",
      // https://github.com/gajus/babel-plugin-react-css-modules
      {
        "exclude": "node_modules",
        "webpackHotModuleReloading": true,
        "handleMissingStyleName": "warn",
        "generateScopedName": "[name]__[local]___[hash:base64:5]",
        "filetypes": {
          ".pcss": {
            "syntax": "postcss-scss"
          }
        }
      }
    ]
  ]
}

I tried using the context property but it didn't solve my issue.

Imports like:

import './styles/main.pcss'; works.

but

import 'src/styles/main.pcss'; doesn't work.

In the post(https://www.jjinux.com/2018/04/javascript-porting-from-react-css.html), I read that the plugin isn't very good at respecting webpack resolver. Are there any plans to provide support for this feature or is there a way to configure the plugin to resolve paths?

shettayyy avatar Aug 08 '18 09:08 shettayyy

Well, same here. I'm also having this issue for a while.

Edit: I think this issue caused by #25

ramesaliyev avatar Aug 15 '18 13:08 ramesaliyev