Setup VSCode for typescript with css modules
Setup VSCode for typescript with css modules import support. You can be able import css,scss,less,stylus file as modular import in typescript+react+webpack project.
This method also has the following functions and advantages:
- fix issues react bundle all things together.
Install typescript plugin
yarn add -D typescript-plugin-css-modules
or
npm install -D typescript-plugin-css-modules
Change VSCode USER SETTINGS json
add these configuration to your user settings json by CTRL+SHIFT+P
{
// prompt using local project typescript version
"typescript.enablePromptUseWorkspaceTsdk": true,
// add plugin to vscode typescript server language
"typescript.tsserver.pluginPaths": [
"typescript-plugin-css-modules"
]
}
Change VSCode PROJECT SETTINGS json
add these configuration to your project settings json
{
// tell vscode to using local project typescript version
"typescript.tsdk": "./node_modules/typescript/lib"
}
Modify tsconfig.json
enable css modules plugin in project typescript configuration by editing tsconfig.json
{
"compilerOptions": {
// enable css modules plugin
"plugins": [{ "name": "typescript-plugin-css-modules" }],
"lib": [
"DOM", // browser DOM support such as (window, document.*, etc)
"ES2020" // enable modern ECMAScript prototype support
]
},
"include": [
"src", // include all typescript and javascript files
"src/**/*.json", // json file import support
"src/**/*.css", // css file import support
"src/**/*.scss", // scss file import support
"src/**/*.less" // less file import support
],
"exclude": [
"**/node_modules/**", // exclude node_modules folder from compilation
"**/dist/**" // exclude dist folder
]
}
Full example of tsconfig.json
Or use my typescript config then modify it according to your project structure
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"jsx": "react",
"module": "CommonJS",
"moduleResolution": "Node",
"esModuleInterop": true,
"outDir": "tmp/tsc",
"checkJs": false,
"composite": true,
"allowJs": true,
"resolveJsonModule": true,
"downlevelIteration": true,
"allowSyntheticDefaultImports": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true,
"strict": false,
"lib": [
"DOM",
"ES2020"
],
"typeRoots": [
"./typings",
"./node_modules/@types",
"./node_modules/nodejs-package-types/typings"
],
"types": [
"rsuite"
],
"plugins": [
{
"name": "typescript-plugin-css-modules"
}
]
},
"include": [
"src",
"src/**/*.json",
"src/**/*.css",
"src/**/*.scss",
"src/**/*.less",
"typings"
],
"exclude": [
"**/node_modules/**",
"./page/**/*",
"**/dist/**"
]
}
Create or modify src/global.d.ts
create or modify src/global.d.ts
to apply css modules to typescriptreact project, by adding below declarations:
// typescript css modules
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.module.scss' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.module.sass' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.module.less' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.module.styl' {
const classes: { [key: string]: string };
export default classes;
}
// additional configs
declare global {
interface Window {
// custom global window properties
[key: string]: any; // enable dynamic object support
dataLayer: Record<string, any>[]; // google analytics
opera: Record<string, any>;
opr: Record<string, any>;
safari: Record<string, any>;
adsbygoogle: any; // google adsense
clipboardData?: any; // safari clipboard
google: import('@types/google.accounts'); // google new API GSI client
}
interface Event {
// custom global event properties
clipboardData?: any; // safari clipboard
}
}
Conclusion
Now reload window and your vscode now supported import css modules into typescript or javascript files (react or non-react).
To test create new file:
create the style src/Layout.module.scss
.myLayout {
h1 { color: blue; background-color: white; }
}
create the component src/Layout.tsx
import React from 'react';
import styles from './Layout.module.scss';
export function Layout() {
return (
<div className={styles.myLayout}><h1>Hello World</h1></div>
);
}