babel-plugin-auto-css-modules
v1.1.2
Published
Automatically import same name CSS modules.
Downloads
59
Readme
babel-plugin-auto-css-modules
Automatically import same name CSS modules.
Table of Contents
Installation
npm
npm install babel-plugin-auto-css-modules
yarn
yarn add babel-plugin-auto-css-modules
Documentation
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:
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.
Code of Conduct
Please see the code of conduct.
Contributing
Please see the contributing guide.