Why CSS loader of webpack not working?

Question

I am making the toy example described in the documentation of css-loader: https://github.com/webpack-contrib/css-loader

I also tried this basic guide that suggest the same: https://css-tricks.com/css-modules-part-2-getting-started/

However, both VS Code highlight and when bundling through the command line complain that the module of the CSS file is not available. Like it does not really recognize it. I have checked I indeed really have installed css-loader, webpack etc. Other than the css loader, webpack is working fine for javascript, typescript etc. So it is really just a problem with CSS. Any ideas why failing?

The error I get is:

  TS2307: Cannot find module 'styles.css'.

My file:

import test from 'styles.css';

I tried also without file extension, with and without curly braces etc. But really followed the toy example in the docu of css-loader.

My webpack.config file:

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: 'title Cool!',
    }),
  ],
  module: {
    rules: [
      {
        test: /.tsx$/, 
        loader: "ts-loader" ,
      },
      {
        test: /.css$/,
        use: [ 'style-loader', 'css-loader' ],
      }
    ]
  }
}

module.exports = config;

Any ideas?

share your webpack config file .and also the structure of your code, cause we need to know the structure to help u navigate to style file. — jsDevia
– jsDevia, Commented Aug 18, 2018 at 10:29
I followed the example in the official docu:github.com/webpack-contrib/css-loader — JJ F
– JJ F, Commented Aug 18, 2018 at 10:33
I also tried this guide that does almost the same with the same error as described in the post: css-tricks.com/css-modules-part-2-getting-started — JJ F
– JJ F, Commented Aug 18, 2018 at 10:34
Most likely the path to styles.css is wrong. If styles.css is in the same folder as the file you've tried to import from, try import test from './styles.css'; — remix23
– remix23, Commented Aug 18, 2018 at 10:39

Michal · Accepted Answer · 2018-08-18 10:54:55Z

1

Are you sure you need a named import? This should work: import './styles.css';.

answered Aug 18, 2018 at 10:54

Michal

2,1013 gold badges31 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JJ F · Accepted Answer · 2018-08-18 12:55:12Z

1

The problem was related to typescript and not to webpack or the css loader. So I needed to add css files to modules for typescript:

declare module '*.css' {
    const content: any;
    export default content;
}

Did the trick. No clue why this is not mention in any of the dozens of tutorial and guides I saw.

answered Aug 18, 2018 at 12:55

JJ F

1,5096 gold badges19 silver badges27 bronze badges

Comments

Sagiv b.g · Accepted Answer · 2018-08-18 11:28:05Z

0

You should provide a relative path to your file:

import test from './path/to/styles.css';

answered Aug 18, 2018 at 11:28

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

2 Comments

JJ F Over a year ago

TS2307: Cannot find module 'styles.css'.

Sagiv b.g Over a year ago

is this this the only place you tried to import 'styles.css'? i would expect to see cannot find module './styles.css'

Collectives™ on Stack Overflow

Why CSS loader of webpack not working?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related