1.0.2 • Published 6 years ago
auto-styles-loader v1.0.2
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.