摘要:本篇教程介绍了HTML+CSS入门 Import CSS Modules with TypeScript and webpack,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 Import CSS Modules with TypeScript and webpack,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
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‘]
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号