CSS Loader 似乎不导出任何东西答案

【问题标题】：CSS Loader seems to not to export anythingCSS Loader 似乎不导出任何东西
【发布时间】：2019-01-25 19:29:00
【问题描述】：

我有一个 nodejs + typescript + ReactJS + webpack + css loader 应用程序。

我必须导入 CSS 模块，即我的语句

import * as styleILove from './css/mycoolCSS.css';

正确捆绑并且输出似乎有效。否则应用程序工作正常。

问题是，如果我执行 console.log (styleILove) 对象存在，但对象内部没有任何内容。根据 CSS 加载器文档，我应该能够发出 console.log(styleILove.myClassName) 但什么也没有。在浏览器的控制台中它不存在并且 VS 代码突出显示也抱怨。

任何想法为什么会失败？

我的 webpack 配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = {
  entry: "./src/index.tsx",
  resolve: {
    extensions: ['.tsx', '.js', '.css']
  },
  output: {
    filename: "bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'asdfasdf',
    }),
  ],
  module: {
    rules: [
      {
        test: /.tsx$/, 
        loader: "ts-loader" ,
      },
      {
        test: /.css$/,
        use: [ 'style-loader', 'css-loader' ],
      }
    ]
  }
}

module.exports = config;

我的 CSS：

.myClassName  {
    box-shadow: 1cm;
}

【问题讨论】：

标签： node.js reactjs typescript webpack css-loader

【解决方案1】：

我通常这样做：

const css = require("./css/mycoolCSS.css");
export const TestComponent: React.SFC = (): JSX.Element => (<div className={css["myClassName"]}/>);

【讨论】：

输出中仍然没有文件。
我不确定您希望在输出中看到什么。不过，我建议您编写一个测试组件，然后尝试测试 css 导入。顺便说一句，我已经用一个非常简单的组件更新了答案。