css-modules / webpack-demo

Working demo of CSS Modules, using Webpack's css-loader in module mode
https://css-modules.github.io/webpack-demo/
1.48k stars 180 forks source link

webpack config question/issue #9

Open pocketjoso opened 9 years ago

pocketjoso commented 9 years ago

Hi there, setting myself up for universal react render using css-modules and webpack. Coming across a strange issue I don't understand, due to limited experience with webpack:

On this line in the webpack config in this repo, why will webpack fail if I modify it simply to try to list the ExtractTextPlugin as one of multiple loaders for css?

{ test: /\.css$/, loaders: [ ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') ] },

Gives me Error: Cannot find module "./App.css" ...

Cheers

joaogarin commented 8 years ago

Hello I am having a simillar issue with angularJs2.

I have the following component inside my src/components

/*
 * Angular 2 decorators and services
 */
import {Component, View} from 'angular2/angular2';

import styles from './logo.css';

/*
 * App Component
 * Top Level Component
 */
@Component({
    selector: 'logo', // <app></app>
    template: `
        <div>
            Here comes the logo
        </div>
    `
})
export class Logo {
    onInit(){
        //console.log(styles);
    }
}

I get the same message

"error TS2307: Cannot find module './logo.css'.".

In my webpack config there are some angular specifics but the general thing is more or less simillar.

I have

{ test: /.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name][local]_[hash:base64:5]!postcss-loader') },

modulesDirectories: ['node_modules', 'components']

My "entry" setting in webpack config is a bit different from the one here. It looks like this :


entry: {
    'angular2': [
      // Angular 2 Deps
      '@reactivex/rxjs',
      'zone.js',
      'reflect-metadata',
      // to ensure these modules are grouped together in one file
      'angular2/angular2',
      'angular2/core',
      'angular2/router',
      'angular2/http'
    ],
    'app': [
      // App
      './src/app/bootstrap'
    ]
  },
joaogarin commented 8 years ago

I was able to fix my issue by using require("./logo.css"); instead of simply

import styles from './logo.css';

Working great now.

tetar998 commented 6 years ago

@pocketjoso did you solve it ?

pocketjoso commented 6 years ago

@tetar998 I did, but it was a long time ago so I don't remember exactly how. Also I'm not sure the same issue is present in the most recent versions of these plugins..