resolve-url-loader cannot operate error msg

[Extra-lightwill]

I'm having an issue with resolve-url-loader:

I have various sass folders/files (see below) and I'm importing them into the main.scss file within a global block.

:global {

/* Insert any additional CSS you need here */
@charset 'UTF-8';

// 1. Configuration and helpers
@import
  'styles/abstracts/variables',
  'styles/abstracts/functions',
  'styles/abstracts/mixins';

(omitted for brevity)

}

While the styles are rendering it throws the following error. After doing some research, I'm still not sure why it's happening.

WARNING in ./~/css-loader?{"modules":true,"importLoaders":1,"sourceMap":true}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?sourceMap!./src/styles.scss
(Emitted value instead of an instance of Error)   resolve-url-loader cannot operate: CSS error
  @page missing '}'
  at error (/home/node_modules/css/lib/parse/index.js:62:15)
 @ ./src/styles.scss 4:14-182 13:2-17:4 14:20-188
 @ ./src/app.js
 @ ./kit/entry/browser.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./kit/entry/browser.js

Any help appreciated!

[leebenson]

I think @import statements need to be at the root-level, rather than inside a :global block.

I realise that's not ideal; it'd be nice for anything imported inside of :global to retain their original classnames by default.

There's a few CSS-related things I've got on my to-do to cover; this, code-split styles (per #4, now tracked at reactql/kit#5), LESS + SASS imports that work the same way, better imports from node_modules, etc.

I've got tomorrow set aside to cover those topics, so hopefully I'll have some resolution to the dangling issues over the next day or two.

[leebenson]

Closing this and tracking in reactql/kit#12