1

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?

Improve this question
6
  • 2
    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. Commented Aug 18, 2018 at 10:29
  • I followed the example in the official docu:github.com/webpack-contrib/css-loader 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 Commented Aug 18, 2018 at 10:34
  • I think its better you share the code. Commented Aug 18, 2018 at 10:34
  • 1
    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'; Commented Aug 18, 2018 at 10:39

3 Answers 3

Reset to default
1

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

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

Comments

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.

Improve this answer

Comments

0

You should provide a relative path to your file: 

import test from './path/to/styles.css';
Improve this answer

2 Comments

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.