CODEWITHSUNDEEP
node.jsreactjstypescriptwebpackcss-loader
JJ F
JJ F

Reputation: 1549

CSS Loader seems to not to export anything

I have a nodejs + typescript + ReactJS + webpack + css loader application.

I got to get imports to CSS modules, i.e. my statements

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

Bundles properly and the output seems valid. Otherwise the application works fine.

The problem is, if I do console.log (styleILove) the object exists but there is nothing inside the object. According to CSS loader documentation I should be able to issue console.log(styleILove.myClassName) but there is nothing. In the console of the browser it does not exist and VS code highlight also complains.

Any ideas why that is failing?

My webpack config:

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;

My css:

.myClassName  {
    box-shadow: 1cm;
}

Upvotes: 0

Views: 128

Answers (1)

Harry
Harry

Reputation: 5707

I usually do it like this:

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

Upvotes: 1

Related Questions