Issues with requiring CSS from plugin

[plwalters]

More details here -

aurelia/dialog#127

But I believe if a plugin requires css from html file it fails.

[plwalters]

Also this seems related - aurelia/dialog#135

[Thanood]

Maybe related: aurelia/webpack-plugin#11

[valichek]

Here is the solution how to avoid errors when using <require from="dialog.css">. Just two line in webpack config needed.

{ test: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'raw'},
{ test: /\.css?$/, exclude: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'style!css' },

First we load it with raw-loader and exclude it from loading with css-loader, and you go

[Vheissu]

I believe this issue is fixed in the latest Webpack implementation stuff @PWKad ?

[kdekooter]

Sorry folks but it looks like it has not been fixed yet:

WARNING in ./src ^\.\/.*$
Module not found: Error: Can't resolve 'css' in '/Users/.../src'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' prefix when using loaders.
                 You need to specify 'css-loader' instead of 'css'.
 @ ./src ^\.\/.*$
 @ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js
 @ multi aurelia

[niieani]

@kdekooter was fixed in aurelia/webpack-plugin@472558f which isn't yet released. This is a new problem, caused by breaking changes in latest betas of Webpack v2.

You can workaround this problem either by updating @easy-webpack/config-aurelia (if you use it), or simply by passing the customViewLoaders option to the WebpackPlugin with the value:

    customViewLoaders: {
      '.css': ['css-loader'],
      '.scss': ['css-loader', 'sass-loader'],
      '.sass': ['css-loader', 'sass-loader'],
      '.less': ['css-loader', 'less-loader'],
      '.styl': ['css-loader', 'stylus-loader'],
    }

[kdekooter]

Thanks for the swift response @niieani. That saved my day!