reactjs - Kan inte importera CSS-modul i .tsx-fil

Jag bygger en grundläggande React-applikation med TypeScript men jag kan inte importera CSS-fil i index.tsx-filen

Jag kan importera index.css-filen på följande sätt:

import './index.css'; 
//this import gives typescript error when running webpack

men kan inte importera som

import * as Styles from './index.css';

detta är min webpack.config.js-fil

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin')
var config = {
    mode:"none",
    entry:"./src/index.tsx",
    output:{
        path: path.resolve(__dirname,"dist"),
        filename: "bundle.js"
    },
    resolve:{
        extensions:[".ts", ".tsx", ".js"]
    },
    module:{
        rules:[
            {test:/\.tsx?$/, loader:"awesome-typescript-loader"},
            { test: /\.css$/, include: path.join(__dirname, 'src/'),
             loader:"typings-for-css-modules-loader" }
        ]
    },
    plugins:[new HtmlWebpackPlugin({
        template: './index.html'
    })]
};

module.exports = config;

Jag försökte följa länkar innan jag postade men utan lycka

Hur inkluderar man en .css-fil i .tsx TypeScript?

Hur man importerar en CSS-fil till en Component .jsx-fil

https://github.com/parcel-bundler/parcel/issues/616

Tack på förhand

Svar #1

Med den nya versionen av React behöver du inte konfigurera något i Webpack eller avvisa ditt projekt för att använda CSS-modul. Allt du behöver göra är:

  1. Installera css-modules-loader: https://github.com/gajus/react-css-modules
  2. Byt namn på filen styles.css till styles.module.css

  3. Importera css-filen till din komponent:

    import styles from './styles.module.css'

  4. Använd className i komponenten:

    <div className={styles.app}> Hello World </div>

Demoprojekt: https://codesandbox.io/s/kwyr5p378o

Svar #2

I typings-for-css-modules-loader-dokumentationen föreslås det att du importerar ditt css som

antingen

import styles from './index.css';

eller

import * as styles from './index.css';

I ditt exempel saknar du nyckelordet from

Relaterade artiklar