Webpack "cannot find module" source-map, module build failed

2.7k views Asked by At

I'm trying to bundle project with Webpack, but I recieve an error: "Cannot find module './stylesheet/css/build.css'" I'm using webpack 1.14.0 and yarn 0.17.10. webpack printscreen

Please give me some advise how I should use require() to get result.

Thanks in advise for your help!

webpack.dev.js

  var config = {
      cache: true,
      devtool: 'source-map',
      entry: {
        polyfills: './src/polyfills',
        vendor:    './src/vendor',
        main:      './src/main'
      },

      output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
      },

      module: {
        loaders: [
          { test: /\.ts$/,   loader: 'awesome-typescript-loader' },
          { test: /\.json$/, loader: 'json-loader' },
          { test: /\.html/,  loader: 'raw-loader' },
          { test: /\.css$/,  loader: 'to-string-loader!css-loader' },
          { test: /\.css$/,  loader: ExtractTextPlugin.extract('css?minimize')}
        ]
      },
      plugins: [
          new webpack.optimize.CommonsChunkPlugin({ name: ['polyfills', 'vendor', 'main'].reverse(), minChunks: Infinity }),
          new ExtractTextPlugin('/src/stylesheet/css/zio.css')
      ],

      resolve: {
        extensions: ['', '.ts', '.js', '.json'],
        modulesDirectories: ['node_modules', 'src']
      }
    };

main.ts

require("./stylesheet/css/build.css");

@NgModule({
  declarations: [
    App,
    Main,
    Auth,
    AppHeader
  ],
  providers,
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    routes
  ],
  bootstrap: [App]
})
export class AppModule {}

Additional information - structure of project

1

There are 1 answers

4
dotcs On

You should configure the ExtractTextPlugin as such:

// webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
}

Then you can require the CSS sheets as you have done already:

require("./stylesheet/css/build.css");
require("./src/stylesheet/css/zio.css");
// and so on ...