3

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

Andrii Sikora
  • 31
  • 1
  • 5

1 Answers1

0

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 ...
dotcs
  • 2,286
  • 1
  • 18
  • 26
  • Thanks for your answer @dotcs, but I just recieved another error: ERROR in ./src/main.ts Module not found: Error: Cannot resolve 'file' or 'directory' ./src/stylesheet/css/build.css in /home/andrii/WebstormProjects/pallybet_frontend_bvb/src @ ./src/main.ts 20:0-41 I'm writting require ("./stylesheet/css/build.css") in typescript file main.ts (entry point), maybe I need to write it another place? Thanks! – Andrii Sikora Dec 21 '16 at 11:12
  • This means that webpack cannot resolve the file path you have given. Can you add information about your file structure to the question? The path should be relative to the `main.ts` file. So if `main.ts` lives in the `src` folder and the stylesheet is located at `src/stylesheet/css/build.css` the path should be `require('./stylesheet/css/build.css')`. – dotcs Dec 21 '16 at 11:32
  • I've added structure of project. I understand your answer and I can understand how it should wotk but, after I used require('./stylesheet/css/build.css'), I still have an error: "ERROR in ./~/css-loader!./src/stylesheet/css/build.css Module build failed: Unknown word (5:1)" If you have more advises it would be pleasure for me to get them and solve this problem. Thanks – Andrii Sikora Dec 21 '16 at 14:38
  • You should not require the css file in the `webpack.dev.js` file, but for example in the `main.ts`. The reason is that `webpack.dev.js` describes the webpack pipeline, whereas `main.ts` is included and transformed by the pipeline. In case you have done this already it would be nice to see the `build.css`, because from the error 'Unknown word' I'd say that there is something in the file that should not be there. – dotcs Dec 21 '16 at 18:36