npm install --save-dev auto-styles-loader

The auto-styles-loader will try to load styles file if it exists in requested file's directory.

Use the loader either via your webpack config, CLI or inline.

Example config

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'auto-styles-loader'
        options: {
          files: ['index.css'],
          tryFilename: true
        }
      }
    ]
  }
}

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |files|{String|Array(String)}|['styles.css', 'style.css', 'main.css']| Files which should be tried to load| |tryFilename|{Boolean|String|Array(String)}|false|Should it try to load styles file based on requested file name|

files

List of files which loader should try to load from requested file path.

Example

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'auto-styles-loader'
        options: {
          files: ['index.css', 'main.css']
        }
      }
    ]
  }
}

const file = require('./path/to/fileName.js');

Will try to load ./path/to/index.css first, and if it doesn't exist ./path/to/main.css

tryFilename

Tries to also load './[requested_file].css' if set to true. When string is set it will be used as extension. It could be also be array of strings to try multiple files.

Examples

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'auto-styles-loader'
        options: {
          tryFilename: true,
          files: ['index.css', 'main.css']
        }
      }
    ]
  }
}

const file = require('./path/to/fileName.js');

Will try to load ./path/to/fileName.css first, and then fallback to files rule.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'auto-styles-loader'
        options: {
          tryFilename: ['.scss', '.css']
        }
      }
    ]
  }
}

const file = require('./path/to/fileName.js');

Will try to load ./path/to/fileName.scss first, and if it doesn't exist ./path/to/fileName.css. After that it will fallback to files rule.