How do i include "css" file in "tsx" and how to use it? i.e how do i render static files?
import * as React from "react";
import { Header } from "./header";
//import "./home.css";
export class Home extends React.Component<{}, {}> {
render() {
return (
<div id="page-top" className="landing-page">
<Header />
</div>
);
}
}
You cannot directly import CSS or any other static files into typescript using only the typescript compiler, but you can with the help of some build tools...
For example using webpack, you can set up the css-loader and style-loader to search your source code for require('./whatever.css') and add it to the build before safely compiling your typescript. If you also have webpack generate your HTML then your CSS will be automatically injected as a stylesheet.
import should work, as long as you don't want to assign it to anything. If you do (ie if using CSS modules) then for the signature of require to not give you typescript warnings add the @types/node definitions to your project. Without any of your build config it is hard to give precise instructions to achieve your goal - there are plenty of resources available to help get webpack set up if you haven't already. The loaders you need will need are css-loader, and typescript-loaderSee this answer:
https://stackoverflow.com/a/37144690/3850405
If you only need css for a class in your component you could do it like below. I like this solution for when inline css does not work and only small changes are needed.
import * as React from "react";
import { Header } from "./header";
export class Home extends React.Component<{}, {}> {
render() {
const css = `
.landing-page {
background-color: orange;
}
`
return (
<div>
<style>
{css}
</style>
<div id="page-top" className="landing-page">
<Header />
</div>
</div>
);
}
}
.tsx file but the question is not about typings. 2) I still think my answer is a viable solution that does not require external dependencies. My link also provides an answer to including a .css-file - I do not like to duplicate another answer when it already exist.
I've stumbled upon this question today also and found that TS now can import css directly with webpack and awesome-typescript-loader exactly like this:
import "./home.css";
But if you like me want to use CSS modules, than you will have to add some more steps:
npm install --save-dev typings-for-css-modules-loadercss-loader to typings-for-css-modules-loader```
module: {
rules: [
{ test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.css$/, use: isDevBuild ? ['style-loader', "typings-for-css-modules-loader?namedExport&modules"] : ExtractTextPlugin.extract({ use: 'typings-for-css-modules-loader?minimize&namedExport&modules' }) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=1000' }
]
}
This will generate typings for css files and you will be able to use them like
import * as style from './home.css';
Here is the article I used for my config: https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10
I recently had this problem when converting my projects from JavaScript to TypeScript and I tell you that the solution is very simple. just create a file as “global.d.ts” in the src directory of your project, in the file global.d.ts you must write the following: declare module “*.css”;
that way vite will recognize files with .css extension.
I went through a lot of related questions/answers and external articles before finally finding a step-by-step walkthrough. While the answer by [alechill] eventually got me to my solution, I thought I would drop in my detailed solution for anyone that finds this post...
npm install sass-loader css-loader style-loader --save // this may differ
edit webpack.config.js to add a rule and an extension to resolve scss
module.exports = {
/* stuff */
module: {
rules: [
/* other rules, */
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
resolve: {
extensions: [/* file extensions, */ '.scss']
},
},
/* more stuff */
};
create/edit declaration.d.ts
declare module '*.scss' {
const content: { [className: string]: string };
export = content; // your IDE may warn of "no usages" here, mine did
}
Make it happen...
SomeComponent.tsx
import React from 'react';
import './SomeComponent.scss';
interface Props { /* ... */ }
interface State { /* ... */ }
class SomeComponent extends React.Component<Props, State> {
/* do awesome stuff */
}
SomeComponent.scss
body {
h1,h2,h3,h4,h5 {
background-color: red; /* test that it works */
}
}
Build and enjoy!
File structure described above
src/SomeComponent.tsx
src/SomeComponent.scss
declaration.d.ts
webpack.config.js
I'm still learning react typescript, so refactoring .scss files into the src/styles directory as an alias is, at this point, an exercise left to you
