gajus / babel-plugin-react-css-modules

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

Can I use webpack resolve.extensions = [".css"] and use import './table' instead of './table.css' in js #295

Open yinsang opened 3 years ago

yinsang commented 3 years ago

Course image

// webpack.config.js

  resolve: {
    extensions: ['*', '.js', '.json', '.jsx', '.tsx', '.ts', '.css', '*.css', '.scss'],
  },

// RuntimeStyleResolution.js

/**
 * @file Demonstrates runtime "styleName" resolution.
 * @see https://github.com/gajus/babel-plugin-react-css-modules#runtime-stylename-resolution
 */

import React from 'react';
import './table';

export default () => {
  return <div styleName='table'>
    <div styleName='row'>
      <div styleName={'cell' + (Math.random() > 0.5 ? ' yellow' : '')}>A2</div>
      <div styleName={'cell' + (Math.random() > 0.5 ? ' yellow' : '')}>B2</div>
      <div styleName={'cell' + (Math.random() > 0.5 ? ' yellow' : '')}>C2</div>
    </div>
  </div>;
};
yinsang commented 3 years ago

I try to debug. It's your notForPlugin function in index.js return false while

extension === './table'

not './table.css' course the problem.