Automatically import same name CSS modules.
npm install babel-plugin-auto-css-modulesAutomatically import same name CSS modules.
* Installation
* Documentation
* Code of Conduct
* Contributing
* License
npm
``bash`
npm install babel-plugin-auto-css-modules
yarn
`bash`
yarn add babel-plugin-auto-css-modules
For any Javascript modules that you want corresponding CSS simply create a CSS file with the extension .css and the same name as your Javascript module in the same directory as your Javascript module. For example if you have a component at foo/bar/Baz.js your corresponding CSS would live at foo/bar/Baz.css.
Then in your Babel configuration include:
`js
const plugins = []
// Omit CSS modules in the test environment as Jest doesn't know how to handle
// them and they provide no value to Jest tests anyways.
if (NODE_ENV !== 'test') {
plugins.push('babel-plugin-auto-css-modules')
}
module.exports = {
plugins,
}
`
This plugin will then automatically inject import statements into your Javascript modules to reference the CSS modules. Given the above example, foo/bar/Baz.js would get import "foo/bar/Baz.css"` at the top of the file.
From here you'll need to configure your bundler of choice to handle CSS modules. If you're using Webpack you may want to check out postcss-loader.
Please see the code of conduct.
Please see the contributing guide.
[cov-img]: https://img.shields.io/codecov/c/github/dogma-io/babel-plugin-auto-css-modules.svg "Code Coverage"
[cov-url]: https://codecov.io/gh/dogma-io/babel-plugin-auto-css-modules
[npm-img]: https://img.shields.io/npm/v/babel-plugin-auto-css-modules.svg "NPM Version"
[npm-url]: https://www.npmjs.com/package/babel-plugin-auto-css-modules