Automatically import your Component's Regular CSS files into your Remix route's links
- Install as a dev dependency
npm install --save-dev remix-component-css-loader- Add the loader to your vite.config file
import { defineConfig } from 'vite'
import { RemixComponentCssLoader } from 'remix-component-css-loader'
export default defineConfig({
plugins: [
RemixComponentCssLoader(), // ensure this loader is always on top
...
],
})- Create a new component with its CSS file. Make sure the CSS file name matches the TSX file name
/app
/components
/YourComponent
+ index.ts
+ YourComponent.tsx
+ YourComponent.css
- Import and use the
<Styled />
// YourComponent.tsx
import { Styled } from 'remix-component-css-loader';
const YourComponent = (props) => {
return (
<Styled>
<span>Hello World!</span>
</Styled>
)
}
export default YourComponent;- Write your CSS styles
/* YourComponent.css */
.YourComponent {
/* your css styles */
}
.YourComponent > span {
/* your css styles */
}- Use your component as usual
// app/routes/example
import YourComponent from '~/component/YourComponent';
const Page = () => {
return (
<div>
<YourComponent />
</div>
)
}
export default Page;- When using this component, the className will be automatically added and your YourComponent.css will be imported
<!-- HTML document -->
<head>
...
<link rel="stylesheet" href="/app/components/YourComponent/YourComponent.css">
...
</head>
...
<div className="YourComponent">
<span>Hello World!</span>
</div>
...<Styled /> can be replaced with any HTMLElement. For example, to use it as an h1:
// YourComponent.tsx
import { Styled } from 'remix-component-css-loader';
const YourComponent = (props) => {
return (
<Styled.h1>
<span>Hello World!</span>
</Styled.h1>
)
}This will automatically be transformed into:
<!-- HTML document -->
...
<h1 className="YourComponent">
<span>Hello World!</span>
</h1>
...