在固定数据表 2 中导入 CSS 文件时出错

【问题标题】：Error importing CSS file in fixed data table 2在固定数据表 2 中导入 CSS 文件时出错
【发布时间】：2018-05-17 10:21:35
【问题描述】：

我正在使用固定数据表 2(0.8.13) 和 React(15.4.2)。但是，当我导入 CSS 文件时，出现错误

模块解析失败： /Users/Desktop/ReactReduxStore/node_modules/fixed-data-table-2/dist/fixed-data-table.css 意外令牌 (23:0) 您可能需要适当的加载程序来处理此文件类型。

我是这样导入的：

import 'fixed-data-table-2/dist/fixed-data-table.css';

【问题讨论】：

添加您的webpack.config.js 代码。
// webpack.config.js module.exports = { entry: './src/main.js', output: { filename: 'bundle.js' }, module: { loaders: [ { loader: 'babel-loader', test: /\.js$/, exclude: /node_modules/ } ] }, devServer: { port: 3000 } };

标签： reactjs webpack

【解决方案1】：

你必须添加 css 加载器来导入它们，

添加css-loader和style-loader：

npm install --save-dev css-loader style-loader

然后在webpack.config.js 中执行以下操作：

module.exports = {
  ...
  module: {
    rules: [
      { 
        loader: 'babel-loader', 
         test: /\.js$/, 
         exclude: /node_modules/ 
      },{
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  ...
}

请注意：

Webpack v1 中的module.loaders 现在在 Webpack v2+ 中为 module.rules。旧的加载器配置被更强大的规则系统所取代，它允许配置加载器等等。出于兼容性原因，旧的 module.loaders 语法仍然有效并且旧名称被解析。新的命名约定更容易理解，是升级配置以使用 module.rules 的一个很好的理由。

【讨论】：