0

I faced a problem with packaging css files with ExtractTextPlugin and css-loader. Here is the part of my config:

plugins: [
    ...
    new ExtractTextPlugin("[name].css")
],
module: {
    loaders: [
        ...
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style", "css")
        },
        {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style", "css!less")
        }
        ...
    ],
    noParse: []
}

When I try to compile my sources it falls with errors:

ERROR in ./~/angular-bootstrap-datetimepicker/src/css/datetimepicker.css
Module build failed: Error: Cannot find module '../../../css-loader/lib/css-base.js'
//OTHER ERRORS WITH ALL CSS FILES
ERROR in ./~/datatables/media/css/jquery.dataTables.css
Module build failed: Error: Cannot find module '../../../css-loader/lib/css-base.js'
 ...
  [363] ./~/jquery-ui/themes/base/all.css 865 bytes {1} [built] [failed]
  [364] ./~/bootstrap/dist/css/bootstrap.css 883 bytes {1} [built] [failed]
  [365] ./~/datatables/media/css/jquery.dataTables.css 907 bytes {1} [built] [failed]
  [366] ./~/angular-datatables/dist/css/angular-datatables.css 910 bytes {1} [built] [failed]
  [367] ./~/angular-bootstrap-datetimepicker/src/css/datetimepicker.css 898 bytes {1} [built] [failed]
  [368] ./~/highcharts/css/highcharts.css 874 bytes {1} [built] [failed]

In other words It can't find css-loader module. My devDependencies part from package.json :

"css-loader": "^0.25.0",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"webpack": "1.13.3",
"webpack-dev-server": "1.16.2"

One more interesting thing, that this config works perfectly on Windows, but I'm trying to run it on Ubuntu and get these errors. Can someone help me?

jahra
  • 1,173
  • 1
  • 16
  • 41
  • `./~/datatables/media/css/jquery.dataTables.css`. Does the `~` character appear in `Windows`? From what I can see, `Webpack` is trying to look for `Home` folder (`~` folder) in current directory which (I suspect) does not exist. – Cù Đức Hiếu Apr 05 '17 at 08:07
  • Thanks for your response! I'm not able to run it on Windows at the moment. I'm working on Ubuntu. – jahra Apr 05 '17 at 08:15
  • Maybe you could try searching for file `datetimepicker.css` in your project, open it and search for `css-base.js` text. Then try replacing relative path with absolute path and see if the error goes away. This is for debugging purpose, remember to change it back. – Cù Đức Hiếu Apr 05 '17 at 08:19
  • All these modules are in `node_modules'. – jahra Apr 05 '17 at 08:34
  • Then you should search in the `node_modules`. The whole point is to check if the 2 third-parties modules `angular-bootstrap-datetimepicker` and `datatables.net` cause problem. Maybe their authors did not test their modules against `Ubuntu`. – Cù Đức Hiếu Apr 05 '17 at 08:38

0 Answers0