Why CSS loader of webpack not working?

webpack css-loader
css-loader minimize
webpack minify css
webpack css not applied
css loader example
webpack import css from node_modules
webpack bundle css
webpack css-chunks

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?

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

webpack style loader and css loader not working for simple example , You need to import your css file in your main index.js file. You can do this by adding @import './style.css';. Updated index.js. import _ from  Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. style-loader and css-loader not working

You should provide a relative path to your file:

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

css-loader, The css-loader interprets @import and url() like import/require() and will (i.e. not wrapped in a JS module) you might want to check out the extract-loader. the mini-css-extract-plugin to extract the CSS when running in production mode. If the extract-text-webpack-plugin is used/applied the style-loader code won't be added to the bundle and there are no <style></style> tags injected via JS because the CSS is already extracted into a separate file (the module is removed from the JS bundle).

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.

webpack 3.8.1 css loader not working · Issue #805 · webpack , hi,everyone i m using facebook react with webpack and i import node module css in my component and its not working. webpack.config.js const  After some more investigation, it's an issue between postcss-loader and css-loader. I opened an issue there as it might be out of scope of css-loader postcss/postcss-loader#198 michael-ciniawsky removed the modules label Apr 23, 2017

style-loader does not working after css is extracted. · Issue #301 , I think that somehow webpack sees that styles is already extracted and it's not necessary to include style tag. But actually it does not matter if  Best How To : The regex in your test expression has a small mistake. woff(2) means that it always looks for woff2 and just captures the 2 in a separate group. If you add a ? after it, webpack should be able to recognize woff as well:

How to configure CSS and CSS modules in webpack, ERROR in ./src/styles.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are  webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Webpack Loaders, CSS and Style Loaders, So, lets start by first installing the two loaders. $ npm install css-loader style-​loader --save-dev. Adding a .css file. Under the src folder  I have webpack 4.2.0 / ES 5 / TS 2.7.2 and damn simple webpack.config file which has plugin uglify added. Bundling happens but Uglify does not. Tried all scenarios webpack -p , webpack - mode production , set the node environment variable. What am i doing wrong. When i run uglify standalone it compresses the file.

Comments
  • 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.
  • I followed the example in the official docu:github.com/webpack-contrib/css-loader
  • 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
  • I think its better you share the code.
  • 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';
  • 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'