4

I have a project, where I use webpack, react, sass. My project structure and webpack.config below. In project I need for purpose to import write @import 'styles/BigComp/index.sass' or import BigComp from './components/BigComp/Index.jsx', but I wanted to omit "index", to set webpack config in a way, that it can figure out, that if in the folder has file index.sass or Index.jsx, then webpack need to import it. In conclusion, I want to write import BigComp from './components/BigComp' to import ./components/BigComp/Index.jsx and write @import 'styles/BigComp' to import styles/BigComp/index.sass. I hope, I make myself clear.

// Do not try to run. It's not a code.
+components
|-+BigComp
  |-Index.jsx
  |-ElemOfBigComp0.jsx
  |-ElemOfBigComp1.jsx
  |-ElemOfBigComp2.jsx

+styles
|-+BigComp
  |-index.sass
  |-elem0.sass
  |-elem1.sass

// webpack.config.js
const path = require('path');
const rules = [
  {
    test: /\.s[ac]ss$/,
    use: [
     'css-loader',
     'sass-loader',
    ],
  },
  {
    test: /\.jsx?$/,
    use: ['babel-loader'],
    exclude: ['/node_modules'],
  },
];

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: { rules },
};
Rami Chasygov
  • 2,714
  • 7
  • 25
  • 37
  • This has already been asked [here](https://stackoverflow.com/questions/34678314/webpack-cant-find-module-if-file-named-jsx) – Hamza El Aoutar Apr 26 '18 at 07:48
  • 2
    Take a look at https://webpack.js.org/configuration/resolve/#resolve-mainfiles . I don’t know about scss files, but for Index.js it should do the trick. – coockoo Apr 26 '18 at 07:52
  • @ElAoutarHamza, I tried `extensions: ['Index.jsx', 'index.sass', '.js', '.jsx']`, doesn't work(( – Rami Chasygov Apr 26 '18 at 07:54
  • @coockoo, you method really works, only eslint throws errors( – Rami Chasygov Apr 26 '18 at 09:52
  • So, the best practice is to name your index files `index.js` with a small letter, not with capital one and require non-js files with extension. But if you want to do it your way – I'd recommend searching for a similar option for eslint. There might be one, I don't know. – coockoo Apr 26 '18 at 10:00
  • @coockoo, so far didn't find option, only solution now is set off import rules – Rami Chasygov Apr 26 '18 at 14:00

0 Answers0