小编Avi*_*orX的帖子

我正在使用打字稿构建基本的反应应用程序，但我无法在index.tsx文件中导入 CSS文件

我可以通过以下方式导入index.css文件：

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

但无法导入为

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

这是我的webpack.config.js文件

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;

我在发布之前尝试了以下链接，但没有运气

如何在 .tsx 打字稿中包含 .css …

我正在尝试从 React 中的数据填充表，但是出现上述错误。

这是填充表格的函数：

let numberOfColumns = props.tabColumns.split(",").length;
let tableData = props.tabRows.split(",");

function generateRows(){
  let r = ``;
  for (let i=0; i<tableData.length/numberOfColumns; i++){
    r =`${r}<tr>`;
    for(let j=0; j<numberOfColumns; j++){
      r = `${r}<td>${tableData[i*numberOfColumns+j]}</td>`;
    }
    r =`${r}</tr>`;
  }
  console.log(r);
  return r;
}

这是表：

<table>
  <tbody>
    <tr>
      {props.tabColumns.split(",").map((column, index) => <th key={"column"+index}>{column}</th>)}
    </tr>
    {generateRows()}
  </tbody>
</table>

数据：

tabColumns: "Name,Age,Occupation",
tabRows: "John,18,Student," +
  "Miranda,23,Nurse," +
  "Ashley,32,Telephonist," +
  "Rose,28,Driver"

结果如下所示： 问题出在 generateRows 函数的某个地方。罪魁祸首可能是什么？提前致谢。