Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webpack config question/issue #9

Open
pocketjoso opened this issue Aug 31, 2015 · 4 comments
Open

webpack config question/issue #9

pocketjoso opened this issue Aug 31, 2015 · 4 comments

Comments

@pocketjoso
Copy link

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

@pocketjoso pocketjoso changed the title universal render and config question/issue webpack config question/issue Aug 31, 2015
@joaogarin
Copy link

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
Copy link

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

import styles from './logo.css';

Working great now.

@tetar998
Copy link

@pocketjoso did you solve it ?

@pocketjoso
Copy link
Author

pocketjoso commented Nov 21, 2017

@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..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants