search

netguru / create-react-app

Create React apps with no build configuration.
MIT License
14 stars 6 forks source link

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

Closed papermana closed 7 years ago

papermana commented 7 years ago

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.