Automatic Styles Loader

A loader for webpack that automatic add styles to imported file

Install

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

Usage

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
        }
      }
    ]
  }
}

Options

Name	Type	Default	Description
files	`{String	Array(String)}`	['styles.css', 'style.css', 'main.css']
tryFilename	`{Boolean	String	Array(String)}`

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.