Question

我有一个nodejs +打字稿+ ReactJS + webpack + css loader应用程序。

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

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

正确捆绑，输出似乎有效。否则，该应用程序将正常运行。

问题是，如果我执行console.log（styleILove），则该对象存在，但对象内部没有任何东西。根据CSS loader文档，我应该可以发出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;
}

Answer 1

我通常这样做：

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

CSS Loader似乎不导出任何内容

1 个答案: