gajus / babel-plugin-react-css-modules

Transforms styleName to className using compile time CSS module resolution.
Other
2.05k stars 162 forks source link

The official demo has important bug #239

Open linxiangjun opened 5 years ago

linxiangjun commented 5 years ago

A few days ago,I submitted an issue,#238 "All styles are automatically converted to hash names(This should not be like this),when i use 'styleName' on tag,This can be converted to hash names,But they are not match" I find that offical demo has the same problem,just like above description 1551583270 1

HuYuee commented 5 years ago

i have same problem. it seem cause by window. you can upgrade css-loader v2 . then, it is ok!

package.json

image

webpack.config.js

/* eslint-disable filenames/match-regex, import/no-commonjs */

const path = require("path");
const context = path.resolve(__dirname, "src");

module.exports = {
  context,
  entry: "./index.js",
  module: {
    loaders: [
      {
        include: path.resolve(__dirname, "./src"),
        loaders: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
              context
            }
          }
        ],
        test: /\.css$/
      },
      {
        include: path.resolve(__dirname, "./src"),
        loader: "babel-loader",
        query: {
          plugins: [
            "@babel/transform-react-jsx",
            [
              "react-css-modules",
              {
                context
              }
            ]
          ]
        },
        test: /\.js$/
      }
    ]
  },
  output: {
    filename: "[name].js"
  },
  stats: "minimal"
};