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

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

Open yinsang opened this issue 5 years ago • 1 comments

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 avatar Dec 17 '20 13:12 yinsang

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

extension === './table'

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

yinsang avatar Dec 17 '20 13:12 yinsang