If you try to use CSS Modules in TypeScript the same way you would use them in JavaScript, with webpack’s css-loader, you’ll see an error: ”TS2307: Cannot find module ‘./styles.css‘”. typings-for-css-modules-loader is a drop-in replacement for css-loader that works with TypeScript and generates typings for CSS on the fly.
You’ll need to install dependencies first:
npm install --save-dev css-loader typings-for-css-modules-loader
Webpack:
...{ ???????????????test: /\.css$/, ???????????????include: path.join(__dirname, ‘src‘), ???????????????use: [ ???????????????????‘style-loader‘, ???????????????????{ ???????????????????????loader: ‘typings-for-css-modules-loader‘, ???????????????????????options: { ???????????????????????????modules: true, ???????????????????????????namedExport: true, ???????????????????????????camelCase: true, ???????????????????????}, ???????????????????}, ???????????????], ???????????},...css:
.salmon-button { ???padding: 0.5em 1em; ???background: snow; ???color: salmon; ???border: 1px solid salmon; ???border-radius: 3px; ???font-size: 1.6em; ???font-weight: bold;}js:
With camelCase turned on in Webpack, we can do:
import * as styles from ‘./index.css‘;const html = `<button class=${styles.salmonButton}>Click me!</button>`;document.getElementById(‘app‘).innerHTML = html;Instead of:
styles[‘salmon-button‘]
[Webpack + React] Import CSS Modules with TypeScript and webpack
原文地址：https://www.cnblogs.com/Answer1215/p/8361472.html