CODEWITHSUNDEEP
reactjstypescriptwebpackcss-loader
JJ F
JJ F

Reputation: 1549

Why CSS loader of webpack not working?

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?

Upvotes: 1

Views: 2346

Answers (3)

JJ F
JJ F

Reputation: 1549

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.

Upvotes: 1

Sagiv b.g
Sagiv b.g

Reputation: 31024

You should provide a relative path to your file: 

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

Upvotes: 0

Michal
Michal

Reputation: 2083

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

Upvotes: 1

Related Questions