zoukankan      html  css  js  c++  java
  • [Webpack + React] Import CSS Modules with TypeScript and webpack

    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']
  • 相关阅读:
    作业三3
    作业三2(改过)
    第一章
    实验2
    第三章
    例2-11
    例2-10
    例2-8
    例2-9
    例2-7
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8361472.html
Copyright © 2011-2022 走看看