Skip to content
This repository was archived by the owner on Oct 19, 2022. It is now read-only.

Apply sass-loader first, before postcss-loader #12

Merged
merged 1 commit into from
Aug 24, 2017
Merged

Apply sass-loader first, before postcss-loader #12

merged 1 commit into from
Aug 24, 2017

Conversation

papermana
Copy link

There is currently an issue with at least one part of the SCSS syntax, namely string interpolation in media queries. For example:

Module build failed: Syntax Error 

(4:12) Unknown word

  2 | 
  3 | .test {
> 4 |   @media #{$test} {
    |            ^
  5 |     color: red;
  6 |   }

Where $test could even just be a string, like #{'screen and (min-width: 768px)'}.

Presumably, the issue also affects some other parts of the syntax, however for now this is the only thing I've caught.

The reason for this problem seems to be the order of CSS transformations applied by Webpack. Since postcss-loader is applied first, it hangs up on the unknown syntax before sass-loader manages to process it.

This PR changes the order of loaders for CSS/SCSS code, so that sass-loader gets applied before any others.

@papermana papermana merged commit 8a23ea0 into netguru:master Aug 24, 2017
@papermana papermana deleted the fix-css-loaders-order branch August 24, 2017 10:15
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants