resolve-url-loader cannot operate: CSS error

[CmdrShepardsPie]

Getting this error when I include resolve-url-loader in my build. All SCSS compiles okay without it.

webpack.config.js:

      {
        // SASS LOADER
        // Reference: https://github.com/jtangelder/sass-loader
        test: /\.s(a|c)ss$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { sourceMap: true, importLoaders: 3 } },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          { loader: 'resolve-url-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]
      }

styles.scss:

.xxx-styles {
  @import '~xxx-core/src/styles/xxx-xxx.scss';

  h3 {
    color: #000;
  }
}

~xxx-core/src/styles/xxx-xxx.scss:

////////////////////
// Import xxx Core
////////////////////

// Core variables and mixins
@import 'xxx/colors';
@import 'xxx/variables';
@import 'xxx/mixins';

// Reboot and dependencies
@import 'xxx/reboot';

// Core CSS
@import 'xxx/fonts';

xxx/variables.scss:

$font-path: 'https://s3-us-west-2.amazonaws.com/xxx-xxx-media/assets/fonts/xxx/' !default;
$font-weight-normal:       normal !default; // 400

xxx/fonts.scss:

@font-face {
  font-family: 'xxx';
  src:
          url($font-path + 'xxx-regular.woff2') format('woff2'),
          url($font-path + 'xxx-regular.woff') format('woff'),
          url($font-path + 'xxx-regular.ttf') format('truetype');
  font-weight: $font-weight-normal;
  font-style: normal;
}

Console:

WARNING in ./~/css-loader?{"sourceMap":true,"importLoaders":3}!./~/postcss-loader?{"sourceMap":true}!./~/resolve-url-loader?{"sourceMap":true}!./~/sass-loader/lib/loader.js?{"sourceMap":true}!./~/source-map-loader!./client/app/styles/styles.scss
(Emitted value instead of an instance of Error)   resolve-url-loader cannot operate: CSS error
                                                  /Users/xxx/code/xxx/client/app/styles/styles.scss:284:3: @font-face missing '}'
at error (/Users/xxx/code/xxx/node_modules/css/lib/parse/index.js:62:15)
@ ./client/app/styles/styles.scss 4:14-315 13:2-17:4 14:20-321
@ ./client/app/app.module.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./client/app/app.module.ts

[bholloway]

@CmdrShepardsPie There are limitations with what syntax can be parsed with the rework-css engine used internally.

What we need here is

• Ensure that this is an issue with reworkcss and not some other problem. And to identify what CSS is causing the problem.
• Allow you to work-around the problem. Removing reworkcss is a longer-term issue.

So to move forward, are you able to remove resolve-url-loader and extract (or otherwise determine) the CSS that is coming out of the sass-loader.

[bholloway]

Ping @CmdrShepardsPie any progress?

[bholloway]

Finally replaced rework with postcss.

Please refer to #97 as version 3 may help any open issues.

[bholloway]

I'm going to close this ageing issue because we have a new version 3.0.0 which (e2e testing confirms) is much better.

Please open a fresh issue for any ongoing problems and link to this one as needed.

I'm not opposed to reopening this issue but certainly lets talk with respect to the new version.